justify-content

→ 메인 축을 기준 (가로)

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.

---

align-items

→ 교차 축에 대한 기준 (세로)

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

---

flex-direction

→ 해당 방향으로 정렬한다

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

reverse가 들어가는 것은flex-start 와 flex-end 뜻이 반대가 된다.

column 이 들어가는 것은 메인축과 교차축이 바뀐다.

---

order

→ 각각 지정함 (개별요소)

컨테이너의 row나 column의 순서를 역으로 바꾸는 것만으로는 충분하지 않습니다.
이러한 경우에는 order 속성을 각 요소에 적용할 수 있습니다.

• order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.
  • 요소 A , B , C가 있을 때 A가 0 B가 10 C가 -10 이면
    C A B 로 배치된다 ( 크기만 하면 되고 작기만 하면 된다

---

align-self

→ 각각 지정함 (개별요소)

 align-items가 사용하는 값들을 그대로 사용함
그 값들은 지정한 요소에만 적용됩니다.

---

flex-wrap

→ 몇 줄로 정렬할지 지정한다

• nowrap: 모든 요소들을 한 줄에 정렬합니다.
• wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

---

flex-flow

→ flex-direction과 flex-wrap 합친 것과 같음
**** 이 속성은 공백 문자(" ")를 이용하여 두 속성의 값들을 받음

---

align-content

→ 여러 줄 사이의 간격을 지정

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.