display: flex;
justify-contents
주축(main-axis)입니다.
flex-direction이 row일 경우에는 가로축, column일 경우에는 세로축입니다.
- flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
- flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
- center: 요소들을 컨테이너의 가운데로 정렬합니다.
- space-between: 요소들 사이에 동일한 간격을 둡니다.
- space-around: 요소들 주위에 동일한 간격을 둡니다.
align-items
교차축(cross-axis)입니다.
flex-direction이 row일 경우에는 세로축, column일 경우에는 가로축입니다.
- flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
- flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
- center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
- baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
- stretch: 요소들을 컨테이너에 맞도록 늘립니다.
flex-direction
주축과 교차축을 결정하는 프로퍼티입니다.
- row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
- row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
- column: 요소들을 위에서 아래로 정렬합니다.
- column-reverse: 요소들을 아래에서 위로 정렬합니다.
단, column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀝니다.
Order
플렉스 박스 안의 개별 요소들의 순서를 지정할 수 있습니다.
기본값은 0입니다.
숫자 지정 시 오름차순으로 배치되며, 음수를 지정할 수도 있습니다.
.red {
order: -1;
}값이 0이면 코드 작성 순서대로 배치되며, 어느 요소에 1을 주게 되면 그 요소는 0인 다른 요소들의 맨 마지막에 가게 됩니다. 마찬가지로 -1을 주면, 0인 다른 요소들의 가장 앞에 위치하게 됩니다.
align-self
지정한 요소를 개별적으로 정렬할 수 있습니다.
flex-wrap
요소들을 강제로 한 줄에 모두 배치할 것인지, 여러 줄로 나눌 것일지를 결정합니다.
- nowrap: 모든 요소들을 한 줄에 정렬합니다.
- wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
- wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
flex-flow
flex-direction과 flex-wrap을 동시에 지정할 수 있습니다.
flex-flow: row wrap / column wrap ... ;align-content
요소들의 줄이 여럿일 때, 줄들 사이의 간격을 지정합니다.
따라서 한 줄일때는 작동하지 않습니다.
- flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
- flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
- center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
- space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
- space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
- stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
