Flexbox로 유연한 레이아웃을 만듭니다

Flexbox : CSS 레이아웃 강국

Flexbox 또는 CSS Flexible Box 레이아웃 모듈은 1 차원 레이아웃을 단순화하여 항목을 행 또는 열로 배선시킵니다. 컨테이너에 (또는 )를 적용하면 직접 어린이가 Flexbox 규칙에 따라 플렉스 아이템으로 변환됩니다. 이것은 유연한 형태 나 수직 센터링과 같은 다양한 UI 패턴을 코딩하는 것을 간소화합니다. 품목을 수평으로 정렬 할 때 Flexbox를 선택하십시오. 그리드는 2 차원 배열 (행 및 열)으로 탁월합니다 Flexbox 기초

CSS 그리드 이전에 Flexbox는 단일 축 레이아웃 ( 또는 를 사용한 행 또는 열)에 대해 최고를 통치했습니다. 컨테이너에

를 추가하면 어린이의 Flex 형식 컨텍스트가 시작됩니다. 참고 : 이전 브라우저는 또는 와 같은 공급 업체 접두사가 필요할 수 있습니다. 아래 이미지는 플렉스 컨테이너의 직접적인 어린이가 플렉스 아이템이되는 방법을 보여줍니다. 이들은 요소 또는 비어있는 텍스트 노드 일 수 있습니다. 더 이상의 스타일이 없으면 품목은 높이가 가장 높고 (가장 높은 것), 수평으로 (또는 수직 쓰기 모드에서 수직으로) 스택을 쌓고 간격이 없습니다. 그들은 컨테이너를 넘칠 수도 있습니다. display: flex display: inline-flex 실용적인 Flexbox 응용 프로그램

Flexbox는 복잡한 레이아웃을 단순화합니다. 이 예를 고려하십시오 : 1. 미디어 객체 구성 요소 :

Flexbox에서는 반응 형 양식을 만드는 것이 쉽지 않습니다.

속성 속성 (, flex-direction: row 및 )은 항목 사이징을 제어합니다. column 입력은 확장되고 버튼은 고정 된 150px로 유지됩니다. 와 display: flex 값은 비례 적이라는 것을 기억하십시오 -webkit-flex -moz-flex 3. 수직 센터링 :

수직 중심 내용은

:

로 단순화됩니다

이것은 컨테이너 내에서 품목을 구부리게합니다.

4. 그리드와 같은 레이아웃 :

그리드는 그리드에 이상적이지만 Flexbox는 및 및 : 를 사용하여 적응 가능한 레이아웃을 생성 할 수 있습니다.

flex-wrap: wrap flex-basis Flexbox vs. Grid : 올바른 도구 선택 flex-grow 2 차원 레이아웃에는 그리드를 사용하십시오. 수평 또는 수직 정렬이 필요한 단일 축 레이아웃에는 Flexbox를 사용하지만 둘 다 아닙니다. 종종 프로젝트는 두 기술을 결합하여 최적의 결과를 결합합니다 추가 학습 :

CSS- 트릭의 "Flexbox에 대한 완전한 안내서"및 기타 리소스를 참조하십시오. Flexbox 기능에 더 깊이 다이빙을하십시오.

위 내용은 Flexbox로 유연한 레이아웃을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!