유연한 박스 레이아웃을 다루는 속성들을 다룬다. 새로운 그리드(grid) 레이아웃이 나오면서 정렬과 관련된 속성들은 CSS Box Alignment 모듈로 분류되었다.
Flexible Box Layout은 플렉스 컨테이너 내의 컬럼들이 하나의 행(인라인) 집합 단위로 처리된다. 즉 동일한 컨테이너 내에 있는 플렉스(flex) 레이아웃 항목이라 할 지라도 다음 줄로 내려가면 새로운 플렉스(flex) 레이아웃 박스로 다루어지며 플렉스 항목의 수가 같지 않다면 이전 행의 열과 맞추지 않는다. 이러한 레이아웃을 '1차원 레이아웃'이라 하며 그리드 타입의 목록 UI를 구현할 때는 최적화되어 있지 않다. 그리드 타입의 UI를 구현하고자 할 때는 Grid Layout을 이용한다.
다음 아래의 샘플 코드는 Flexible Box 처리를 한 레이아웃을 보여주고 있다. 화면 가로 크기에 따라 적절하게 반응을 한다.
명칭 | 설명 |
---|---|
main axis main dimension | 플렉스 컨테이너(flex container)내 플렉스 항목이 배치되는 주축(main axis) |
main-start main-end | 플렉스 아이템(flex item)은 main-start에서 main-end 방향으로 플렉스 컨테이너내에서 배치 |
main size main size property | 플렉스 컨테이너 또는 플렉스 아이템의 너비 또는 높이 중 주축 방향의 크기 |
cross axis cross dimension | 주축(main axis)에 수직인 교차축(cross axis) |
cross-start cross-end | 플렉스 항목이 플렉스 라인(주축)을 따라 채워지고 플렉스 컨테이너의 교차 시작쪽에서 교차 끝쪽으로 배치 |
cross size cross size property | 플렉스 컨테이너 또는 플렉스 아이템의 너비 또는 높이 중 교차축 방향의 크기 |
Flex 항목 정렬과 관련된 속성들은 CSS Box Alignment 모듈로 분리되었다.
flex-grow
, flex-shrink
, flex-basis
속성을 한번에 작성한다.flex-direction
과 flex-wrap
속성을 한번에 지정하는 속기 속성이다.