CSS Flexbox 정렬 속성과 방향 정리

Flexbox를 공부하면서 정렬에 쓰는 속성들을 모아 두었습니다. 연습에는 Flexbox Froggy를 사용했습니다.

먼저 정렬 축을 구분합니다

Flexbox에는 요소가 놓이는 주축과 그에 수직인 교차축이 있습니다. 보통의 가로쓰기 화면에서 row는 가로 방향이지만 flex-direction이 바뀌면 정렬 축도 달라집니다.

처음에는 justify-content를 가로 정렬, align-items를 세로 정렬로 외웠지만 방향을 바꾸면 맞지 않았습니다. 아래 속성의 기준은 W3C Flexbox 명세를 참고할 수 있습니다.

justify-content: 주축 정렬

• flex-start: 주축의 시작 쪽에 모읍니다.
• flex-end: flex-start와 반대로 주축의 끝 쪽에 모읍니다.
• center: 주축의 가운데에 모읍니다.
• space-between: 첫 요소와 마지막 요소는 양 끝에 두고 요소 사이 간격을 같게 만듭니다.
• space-around: 각 요소 양옆에 같은 공간을 둡니다. 요소 사이 공간은 컨테이너 양 끝의 공간보다 두 배 큽니다.

align-items와 align-self: 교차축 정렬

align-items는 컨테이너 안의 요소를 교차축에서 정렬합니다.

• flex-start: 교차축의 시작에 맞춥니다.
• flex-end: 교차축의 끝에 맞춥니다.
• center: 교차축의 가운데에 놓습니다.
• baseline: 요소의 글자 기준선에 맞춥니다.
• stretch: 교차축 크기가 자동인 요소를 해당 줄에 맞춰 늘립니다. 최소·최대 크기 제한은 적용됩니다.

align-self는 align-items에서 쓰는 정렬 값을 개별 요소에만 따로 적용할 때 씁니다.

align-content: 여러 줄의 정렬

여러 줄을 허용한 flex 컨테이너에서 줄들을 교차축에 어떻게 배치할지 정합니다. 한 줄만 허용하는 nowrap 컨테이너에는 적용되지 않습니다.

• flex-start: 줄들을 교차축의 시작에 모읍니다.
• flex-end: 줄들을 교차축의 끝에 붙입니다.
• center: 줄들을 교차축의 가운데에 모읍니다.
• space-between: 줄 사이에 같은 간격을 둡니다.
• space-around: 각 줄 주변에 같은 공간을 둡니다.
• stretch: 남는 공간을 줄에 나누어 늘립니다.

flex-direction: 요소를 놓는 방향

• row: 글이 진행하는 방향을 주축으로 씁니다.
• row-reverse: row와 반대 방향입니다.
• column: 블록이 쌓이는 방향을 주축으로 씁니다. 일반적인 가로쓰기에서는 위에서 아래입니다.
• column-reverse: column을 뒤집은 방향입니다.

order: 화면에 표시되는 순서

기본값은 0입니다. 음수와 양수를 줄 수 있으며 값이 작은 요소부터 배치되고 같은 값끼리는 원래 문서 순서를 따릅니다.

flex-wrap과 flex-flow: 줄바꿈

• nowrap: 요소를 한 줄에 배치합니다.
• wrap: 필요하면 여러 줄에 배치합니다.
• wrap-reverse: 여러 줄에 배치하되 교차축의 시작과 끝을 뒤집습니다.

flex-flow는 flex-direction과 flex-wrap을 한 번에 적는 단축 속성입니다.