Flex Box (플렉스 박스) 가이드
들어가며
Flex Box 예시 : 모든 아이템은 CSS에서 너비 300, 높이 300으로 지정되어 있지만, 컨테이너에 맞게 너비가 줄어든 모습입니다.
Flex Box (Flexible Box Module) 는 Flex Box 내의 아이템을 문자 그대로 신축성 있게 정렬해주는 레이아웃입니다.
행이나 열 중 하나의 차원을 골라 Flex Box 내의 아이템을 정렬해줍니다.
사용자가 고른 차원 (기본적으로 행) 밖으로 아이템이 빠져나가는 것을 아이템의 높이 / 너비 조정을 통해 방지해주며, Flex Box 내의 아이템을 컨테이너에 맞게 늘리거나 줄이는 등 다양한 옵션을 제공합니다.
또한, css를 다루며 많이들 필요로 하시는 완전한 중앙 정렬(가로 중앙, 세로 중앙) 등도 손쉽게 이용하실 수 있습니다.
과거의 CSS는 사용자가 어느 환경에 놓여있는지 크게 고려하지 않았지만, Flex Box는 다릅니다.
한글 등과 같이 문자가 왼쪽에서 오른쪽으로 진행된다면 시작 선은 왼쪽일 겁니다. 하지만 아랍어 등과 같이 오른쪽에서 왼쪽으로 문자가 진행된다면 시작 선이 오른쪽, 끝 선이 왼쪽으로 변경될 겁니다.
쉽게 말하자면, 왼쪽에서 오른쪽으로 문자가 진행되는 나라는 1234567 순으로 아이템이 정렬되지만, 오른쪽에서 왼쪽으로 문자가 진행되는 나라에서는 7654321 순으로 정렬됩니다.
컨테이너
display
Flex Box로 만들고 싶은 컨테이너에 위와 같은 CSS를 적용해주시면 해당 요소는 Flex Box가 됩니다.
flex와 inline-flex는 block과 inline-block의 차이를 생각하시면 금방 이해되실 겁니다.
flex-direction
flex-direction은 Flex Box의 정렬 방법을 설정합니다.
값
row (기본값) : 주 축은 행, 시작 선에서 끝 선으로 정렬 (주로 왼쪽에서 오른쪽)
row-reverse : 주 축은 행, 끝 선에서 시작 선으로 정렬 (주로 오른쪽에서 왼쪽)
column : 주 축은 열, 시작 선에서 끝 선으로 정렬 (주로 위에서 아래)
column-reverse : 주 축은 열, 끝 선에서 시작 선으로 정렬 (주로 아래에서 위)
정확한 설명을 위해 좀 어렵게 적었나 싶지만, 한국의 사용자는 대부분 괄호 안에 적힌 방향으로 정렬됩니다.
상술했듯, Flex Box는 행(가로선), 열(세로선) 중 한 차원을 골라 아이템을 정렬하는데, flex-direction은 그 차원을 정하는 옵션입니다.
row와 row-reverse에선 행(가로선)이 주 축이 되고, 열(세로선)이 보조 축이 됩니다.
column과 column-reverse에선 열(세로선)이 주 축이 되고, 행(가로 선)이 보조 축이 됩니다.
주 축과 보조 축의 개념은 아래에도 나올 예정이니 유념해주세요.
flex-wrap
컨테이너가 아이템들을 한 줄에 채울 수 없을 때 어떻게 할지 결정합니다.
값
nowrap (기본) : 아이템의 너비나 높이를 줄여 컨테이너에 맞춥니다.
wrap : 아이템을 다음 행이나 열로 넘깁니다.
wrap-reverse : 아이템을 다음 행이나 열로 넘깁니다. 넘어가는 줄이 기본과 반대로 넘어갑니다.
ex) flex-direction이 row라 가정하면, wrap은 사진처럼 7번을 아래로 내리지만, wrap-reverse는 7번을 위로 올립니다.
앞서 Flex Box는 아이템을 유동적으로 줄여 컨테이너에 맞춘다고 했지만, 아이템을 더는 줄일 수 없을 때 flex-wrap이 nowrap이라면 아이템이 컨테이너 밖으로 나가게 됩니다.
flex-flow
앞서 언급한 두 옵션을 flex-flow란 옵션으로 합칠 수 있습니다.
앞이 flex-direction, 뒤가 flex-wrap입니다.
justify-content
주 축에서 아이템을 어떻게 정렬할 것인지 정하는 옵션입니다.
값
flex-start (기본값) : 주 축의 시작 선(주로 왼쪽 혹은 위)에 아이템을 정렬합니다.
flex-end : 주 축의 끝 선(주로 오른쪽 혹은 아래)에 아이템을 정렬합니다.
center :주 축의 중앙에 아이템을 정렬합니다.
space-between : 주 축의 시작 선에 첫 아이템, 끝 선에 마지막 아이템을 놓은 뒤 그 사이의 아이템을 같은 간격으로 정렬합니다.
space-around : space-between관 달리 첫 아이템과 마지막 아이템이 조금 더 안으로 들어옵니다. 첫 아이템에서 시작 선까지의 거리와 마지막 아이템에서 끝 선까지의 거리와 아이템 사이 거리가 같습니다.
space-evenly : space-around와 달리 시작 선에서 첫 아이템까지 거리, 끝 선에서 마지막 아이템까지 거리, 아이템 사이의 거리 모두가 같습니다.
space-어쩌고의 차이에 대한 이해를 돕기 위한 이미지입니다.
align-items
보조 축에서 아이템을 어떻게 정렬할 것인지 정하는 옵션입니다.
주의 : align-items는 Flex Box 내부 아이템들이 높이가 정해진 상태일 땐 작동하지 않습니다. align-items: stretch를 했는데 요소가 늘어나지 않을 땐 요소에 height 혹은 width를 부여하진 않았는지 확인해주세요.
값
stretch (기본값) : 아이템의 높이(column 혹은 column-reverse에선 너비)를 컨테이너의 높이(column 혹은 column-reverse에선 너비)에 맞춥니다.
flex-start : 보조 축의 시작 선 (주로 위)에 아이템을 정렬합니다.
flex-end : 보조 축의 끝 선 (주로 아래)에 아이템을 정렬합니다.
center : 중앙에 아이템을 정렬합니다.
baseline : 텍스트가 한 줄에 있는 것처럼 정렬합니다.
align-content
(이해를 돕기 위해 배경을 회색으로 칠했습니다. 짙은 회색은 border입니다.)
주 축에 아이템이 한 줄 이상일 때 보조 축에서 아이템을 어떻게 정렬할 것인지 정하는 옵션입니다.
주의 : align-items와 마찬가지로 height 혹은 width가 지정되어 있으면 작동하지 않습니다.
justify-content의 보조 축 버전이라고 생각하시면 편합니다.
값
stretch (기본값) : 아이템의 높이(column 혹은 column-reverse에선 너비)를 컨테이너의 높이(column 혹은 column-reverse에선 너비)에 맞춥니다.
flex-start : 보조 축의 시작 선 (주로 위)에 아이템을 정렬합니다.
flex-end : 보조 축의 끝 선 (주로 위)에 아이템을 정렬합니다.
center : 중앙에 아이템을 정렬합니다.
space-between : 주 축의 첫 줄을 보조 축의 시작 선, 마지막 줄을 보조 축의 끝 선에 정렬하고 그 사이의 줄을 같은 간격으로 정렬합니다.
space-around : 주 축의 첫 줄에서 보조 축의 시작 선까지 거리 + 주 축의 마지막 줄에서 보조 축의 끝 선까지의 거리 = 줄 사이의 거리입니다. 상술했듯 justify-content의 space-around와 축만 다를 뿐 같습니다.
아이템
Flex Box 내부의 아이템에 적용되는 옵션들입니다.
참고 : Flex Box 내부의 아이템엔 float, clear, vertical-align이 아무런 영향을 주지 않습니다.
order
아이템의 우선순위를 정하는 옵션입니다.
기본값은 0입니다.
order이 낮은 순서부터 아이템을 정렬합니다.
예시에선 7번에 -1, 1번에 1을 줬습니다.
align-self
align-items를 아이템에 적용하는 옵션입니다.
값
auto (기본값) : 컨테이너의 align-items를 상속받아 적용합니다.
flex-start : align-items와 동일
flex-end : align-items와 동일
center : align-items와 동일
baseline : align-items와 동일
stretch : align-items와 동일
flex-grow
주 축에 공간이 남을 때 아이템을 늘이는 옵션입니다.
기본 값은 0입니다.
1 이상의 값을 가진 아이템은 주 축에 공간이 남을 때 너비 혹은 높이가 늘어납니다.
늘어나는 정도는 flex-grow의 값과 비례합니다.
flex-shrink
주 축에 공간이 모자랄 때 아이템을 줄이는 옵션입니다.
기본 값은 1입니다.
값이 0이면 공간이 모자라도 아이템이 줄어들지 않습니다.
값이 1 이상이면 공간이 모자랄 때 아이템의 너비 혹은 높이가 줄어듭니다. 값이 크면 클수록 줄어드는 정도가 커집니다.
예시에선 1번에 0, 7번에 2를 줬습니다.
flex-basis
아이템의 기본적인 크기를 정하는 옵션입니다.
아이템의 크기와 컨테이너의 크기를 비교하며 flex-shrink 혹은 flex-grow를 하기 전에 아이템의 크기를 정합니다.
주 축이 행(가로 선)이면 너비, 열(세로 선)이면 높이를 정합니다.
기본값은 auto로, 아이템에 지정된 width 혹은 height을 받아옵니다.
너비나 높이를 정할 때 처럼 %, rem 등의 단위를 쓸 수 있습니다.
예시에선 2번에 20%를 줬습니다. width: 20%와 동일하게 작동합니다.
flex
앞서 언급한 flex-grow, flex-shrink, flex-basis를 합친 옵션입니다.
왼쪽에서부터 flex-grow, flex-shrink, flex-basis를 입력하시면 됩니다.
기본값은 0, 1, auto입니다.
위 셋 중 하나 이상의 옵션을 사용하셔야 한다면, 일일이 적는 것보다 flex 옵션 하나를 사용하시는 걸 추천합니다.
실습
See the Pen flex by Marshall (@marshall-ku) on CodePen.
간단하게 준비해뒀으니 컨테이너와 아이템에 원하는 옵션을 주시면서 이것저것 테스트해보세요.
클릭하시면 수정 가능한 새 창에서 열립니다.
See the Pen Holy Grail Layout by Marshall (@marshall-ku) on CodePen.
이건 Flex Box로 만든 간단한 Holy Grail 예시입니다.
외에도 Flex Box의 활용도는 정말 무궁무진하니, 많은 연습을 해보시길 바랍니다.
다음엔 클론 코딩용 문제와, 각종 활용 방안들에 대해 알려 드리겠습니다.
