Flexbox

flexbox로 레이아웃할 요소의 부모 요소에 display: flex를 지정합니다. 인라인 항목을 flexbox로 취급해 레이아웃하길 희망한다면 display: inline-flex로 지정할 수도 있습니다.

div {
    display: flex;
}

요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.

주축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다. 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
교차축 (cross axis) 은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 cross start과 cross end라고 합니다.
display: flex이 설정된 부모 요소를 일컬어 플렉스 컨테이너 (flex container) 라고 합니다.
플렉스 컨테이너 내부에 flexbox로 레이아웃되는 항목을 일컬어 플렉스 아이템 (flex items) 이라고 합니다.

플렉스 컨테이너

flex-direction : 주축의 방향을 지정합니다.
- row | row-reverse | column | column-reverse
flex-wrap : 플렉스 아이템 요소들이 영역을 벗어났을 때, 줄 바꿈할지 여부를 지정합니다.
- wrap | nowrap | wrap-reverse
flex-flow = flex-direction + flex-wrap
align-items : 모든 직계 자식에 대한 정렬 방식을 지정합니다.
- normal | flex-start | flex-end | center | start | end | self-start | self-end | baseline | stretch | safe | unsafe
justify-content : 주축을 기준으로 플렉스 아이템을 어떻게 정렬할 것인지를 지정합니다.
- start | end | flex-start | flex-end | center | left | right | normal | baseline | space-between | space-around | space-evenly | stretch | safe | unsafe