Properties

Properties

  • account_tree
  • bug_report

Flexible Box Layout

유연한 박스 레이아웃을 다루는 속성들을 다룬다. 새로운 그리드(grid) 레이아웃이 나오면서 정렬과 관련된 속성들은 CSS Box Alignment 모듈로 분류되었다.

소개

Flexible Box Layout은 플렉스 컨테이너 내의 컬럼들이 하나의 행(인라인) 집합 단위로 처리된다. 즉 동일한 컨테이너 내에 있는 플렉스(flex) 레이아웃 항목이라 할 지라도 다음 줄로 내려가면 새로운 플렉스(flex) 레이아웃 박스로 다루어지며 플렉스 항목의 수가 같지 않다면 이전 행의 열과 맞추지 않는다. 이러한 레이아웃을 '1차원 레이아웃'이라 하며 그리드 타입의 목록 UI를 구현할 때는 최적화되어 있지 않다. 그리드 타입의 UI를 구현하고자 할 때는 Grid Layout을 이용한다.

다음 아래의 샘플 코드는 Flexible Box 처리를 한 레이아웃을 보여주고 있다. 화면 가로 크기에 따라 적절하게 반응을 한다.

Flex Layout Box Model과 용어 개념

명칭설명
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

    플렉스 컨테이너 내의 플렉스 항목에 대한 flex-grow, flex-shrink, flex-basis 속성을 한번에 작성한다.
  • flex-basis

    플렉스 레이아웃 항목의 주축(maix axis) 방향의 크기를 설정한다. 기본 값은 컨테이너 내 내용의 크기에 따른다.
  • flex-direction

    플렉스 레이아웃 항목의 방향을 설정한다.
  • flex-flow

    flex-directionflex-wrap 속성을 한번에 지정하는 속기 속성이다.
  • flex-grow

    플렉스 컨테이너 내의 레이아웃 항목이 차지하는 비율을 설정한다.
  • flex-shrink

    플렉스 컨테이너 내의 레이아웃 항목들의 주축 방향의 크기의 합이 플렉스 컨테이너보다 클 경우 축소 비율을 지정한다.
  • flex-wrap

    공간이 부족할 경우 플렉스 레이아웃 항목의 줄바꿈 여부를 지정한다.

W3C Modules