[CSS]flex

부모 요소 flexbox

.parents {
  display: flex;
}

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: 요소들을 아래에서 위로 정렬

Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀜

---

order 속성

order의 기본 값은 0이며, 양수나 음수로 바꿈

order: 1 - 오른쪽과 자리가 바뀜
order: -3 - 왼쪽으로 세 번째와 자리가 바뀜

---

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: 여러 줄들을 컨테이너에 맞도록 늘림

align-content는 여러 줄들 사이의 간격을 지정, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지 지정
한 줄만 있는 경우, align-content는 효과 X