Properties

Properties

Draft
  • account_tree
  • bug_report

Flexible Box Layout

유연한 박스 레이아웃을 다루는 속성들

Flexible Box Layout은 행 단위로 설정된다. 즉 하나의 컨테이너에 있는 flex 레이아웃 항목이라 할 지라도 다음 줄로 내려가면 새로운 flex 컨테이너로 다루어지며 열수가 같지 않다면 이전 행의 흐름 패턴을 그대로 사용하지 않는다. 이러한 레이아웃을 '1차원 레이아웃'이라 하며 그리드 타입의 목록 UI를 구현할 때는 최적화되어 있지 않다. 그리드 타입의 UI를 구현하고자 할 때는 Grid Layout을 이용한다.

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

관련 속성들

  • flex

    부모 요소 안에 있는 컨테이너 항목이 차지하는 크기를 한번에 설정한다.
  • flex-basis

    유연한 레이아웃 항목의 가로 길이를 설정한다. 기본 값은 컨테이너 내 내용의 크기에 따른다.
  • flex-direction

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

    flex-direction과 flex-wrap 속성을 한번에 지정하는 축약식 속성이다.
  • flex-grow

    같은 컨테이너 내의 레이아웃 항목이 다른 유연한 항목에 비해 얼마나 늘어날지를 설정한다.
  • flex-shrink

    같은 컨테이너 내의 다른 유연한 레이아웃 항목과 비교하여 축소 비율을 지정한다.
  • flex-wrap

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