flex box

1. justify-content

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.

• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.

• center: 요소들을 컨테이너의 가운데로 정렬합니다.

• space-between: 요소들 사이에 동일한 간격을 둡니다.

• space-around: 요소들 주위에 동일한 간격을 둡니다.

 

2. align-items

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다

• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.

• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.

• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.

• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

 

3. flex-direction

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.

• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.

• column: 요소들을 위에서 아래로 정렬합니다.

• column-reverse: 요소들을 아래에서 위로 정렬합니다.

 

4. order

• 기존의 order 값은 '0' 이다.
• -1 이나 1 이런식으로 값을 지정해줘서 순서를 조절할 수 있다.

 

5. flex-wrap

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

 

6. flex-flow

• flex-direction과 flex-wrap 을 동시에 사용가능 합니다.

 

7. align-content

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.

• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.

• center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.

• space-between: 여러 줄들 사이에 동일한 간격을 둡니다.

• space-around: 여러 줄들 주위에 동일한 간격을 둡니다.

• stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

---

flexboxfroggy.com/#ko

Flexbox Froggy

좀더 재밋고 쉽게 flex box에 대해 배울있는 사이트