Flexbox는 단일 속성이 아닌 모듈이므로 여러 속성이 포함됩니다. 이 속성들 중 일부는 컨테이너(부모 요소)에 설정해야 하고, 다른 속성들은 자식 요소(flex items)에 설정해야 합니다.
Default Layout이 block
과 inline
흐름 방향에 기초한다면, Flex Layout은 flex
흐름 방향에 기초합니다. Flex Layout의 주요 개념을 설명하는 명세서에서의 그림은 다음과 같습니다.
항목은 main axis
(main-start
에서 main-end
까지) 또는 cross-axis
(cross-start
에서 cross-end
까지) 를 따라 배치됩니다.
flex 컨테이너의 주 축(main axis)은 flex 항목이 배치되는 기본 축입니다.
수평이 아닐 수도 있습니다. 이는 flex-direction
속성에 따라 결정됩니다.
flex items는 main-start에서 시작하여 main-end로 이동하면서 컨테이너 내에 배치됩니다.
flex items의 폭(width) 또는 높이(height) 중 주요 차원에 있는 것이 해당 항목의 주요 크기(main size)입니다.
flex items의 주요 크기(main size) 속성은 주요 차원에 있는 width 또는 height 속성 중 하나입니다.
주 축(main axis)과 수직 방향인 축을 교차 축(cross axis)이라고 합니다.