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)이라고 합니다.