-
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-Wrap
- nowrap : 모든 요소들을 한 줄에 정렬
- wrap : 요소들을 여러줄에 걸쳐 정렬
- wrap-reverse : 요소들을 여려줄에 걸쳐 반대로 정렬
-
Flex-Flow
flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있다.
이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받는다.
ex)
flex-direction : column;
flex-wrap : wrap;
flex-flow : column wrap; -
Align-Content
- flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬
- flex-end : 여러 줄들을 컨테이너의 바닥에 정렬
- center : 여러 줄들을 컨테이너의 가운데에 정렬
- space-between : 여러 줄들 사이에 동일한 간격을 둔다
- space-around : 여러 줄들 주위에 동일한 간격을 둔다
- stretch : 여러 줄들을 컨테이너에 맞도록 늘린다
-
order 속성
Flex 요소의 순서 지정
