Flex

1. justify-content 

- 가로선 상에서 정렬

(1) flex-start : 요소들을 컨테이너 왼쪽 정렬

(2) flex-end : 요소들을 컨테이너 오른쪽 정렬

(3) center : 요소들을 컨테이너 가운데 정렬

(4) space-between : 요소들 사이사이에 간격두기

(5) space-around : 요소들 주위에 동일한 간격두기

 

2. align-items

- 세로선 상에서 정렬

(1) flex-start : 요소들을 컨테이너 꼭대기로 정렬

(2) flex-end : 요소들을 컨테이너 바닥으로 정렬

(3) center : 요소들을 컨테이너 가운데 정렬

(4) baseline : 요소들을 컨테이너의 시작 위치에 정렬

(5) stretch : 요소들을 컨테이너에 맞도록 늘리기

 

3. flex-direction

(1) row: 텍스트의 방향과 동일하게 

(2) row-reverser : 텍스트이 방향과 반대로

(3) column : 위에서 아래로 정렬

(4) column-reverse : 아래에서 위로 정렬

* column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀜.