# Flexbox

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

```CSS
div {
    display: flex;
}
```

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

![Flex](CSS_Flex.svg)

* 주축 (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

## 플렉스 아이템

* `flex` = `flex-grow` + `flex-shrink` + `flex-basis`
* `flex-grow` : 플레스 컨테이너 내부에서 할당 가능한 공간의 정도를 비례값으로 지정합니다.
* `flex-shrink` : 플레스 컨테이너 내부에서 크기가 넘칠 때, 얼마만큼 공간을 줄이지를 비례값으로 지정합니다.
* `flex-basis` : 플렉스 아이템의 초기 크기를 지정합니다.
* `align-self` : 각각의 플렉스 아이템에 대한 정렬 방식을 개별적으로 지정합니다.
* `order` : 플렉스 아이템의 순서를 지정합니다. 기본값은 0입니다. 낮은 순위의 아이템이 먼저 표시됩니다.