CSS Flexible Box Layout은 축을 따라 항목들을 배치하는 방식에 대한 CSS 모듈이며 사용자 인터페이스 디자인에 최적화된 CSS 박스 모델을 정의하고 있습니다. flex 레이아웃 모델에서, flex 컨테이너의 자식들은 어느 방향으로든 배치될 수 있고 크기를 "flex"할 수 있습니다. 이는 여유 공간을 채우기 위해 늘어나거나, 부모 공간을 흘러 넘치지 않기 위해 줄어드는 것 모두를 말합니다. 자식들의 수평 및 수직 정렬 모두 쉽게 조작될 수 있습니다.

기본 예시

다음 예제에서 컨테이너를 display : flex로 지정하였습니다. 이는 컨테이너의 세 자식 아이템이 flex 항목이 되었다는 것을 의미합니다. justify-content의 값은 아이템들을 주 축에 대해 균일한 간격으로 두기 위해 space-between으로 지정하였습니다. 같은 양의 공간이 각 항목 사이에 배치되고 왼쪽 항목과 오른쪽 항목이 flex 컨테이너의 모서리와 나란히 배치됩니다. 또한 align-items의 기본값이 stretch이기 때문에, 아이템들이 교차 축에 대해 늘어나고 있음을 볼 수 있습니다. 아이템들은 flex 컨테이너의 높이까지 늘어나서, 그들 중 가장 키가 큰 아이템과 같은 높이로 보여지게 됩니다.

참고

CSS 속성

정렬 속성

align-content, align-self, align-items와 justify-content 속성은 Flexbox 명세에서 처음 나왔지만, 지금은 Box Alignment에 정의되어 있으며 Flexbox 명세는 최신 정의에 대한 Box Alignment Specification을 참조합니다. 추가적인 정렬 속성은 Box Alignment에서도 정의됩니다.

용어

 

안내서

Flexbox의 기본 개념
Flexbox 기능 개요
다른 레이아웃 방법과 Flexbox와의 관계
Flexbox와 다른 레이아웃 방법 및 타 CSS 사양과의 연관 관계
Flex 컨테이너 속의 아이템 정렬하기
Box Alignment 속성이 flexbox와 어떻게 동작하는지
Flex 아이템 배치하기
아이템들의 방향과 순서를 바꾸는 여러 방법과, 그렇게 할 때 발생할 수 있는 이슈들에 대해 설명합니다.
주 축에 대해 Flex 아이템의 비율 조절하기
flex-grow, flex-shrink, flex-basis에 대해 설명합니다.
Flex 아이템 래핑 마스터하기
여러 줄로 된 flex 컨테이너를 만드는 방법과, 그 안에 포함된 아이템들의 표시 방식을 조절하는 방법
Flexbox의 일반적인 용례
일반적인 flexbox 디자인 패턴
Flexbox의 하위 호환성
Flexbox의 브라우저 상태, 상호 호환성 이슈, 이전 브라우저 지원 및 스펙 버전

명세

명세 상태 설명
CSS Flexible Box Layout Module Candidate Recommendation 초기 정의.

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 20.0 (20.0) 21.0-webkit
29.0
10.0-ms
11.0
12.10 6.1-webkit
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 4.4 11 12.10 7.1-webkit

 

문서 태그 및 공헌자

이 페이지의 공헌자: beowolf9, ljb7977, Netaras
최종 변경자: beowolf9,