출처
MDN - Flexbox
MDN - Flexbox 기본 개념
CSS tricks - Flexbox
MDN - Relationship of flexbox to other layout methods
Josh Comeau - An interactive Guide to Flexbox
1. Flexbox를 사용하는 이유
Flexbox 레이아웃은 일련의 아이템들을 수평, 혹은 수직으로 배치하기 위해 생겨났다.
또한 남는 공간을 어떻게 분배할 것인지 grow(아이템들을 얼마나 확장시킬지), shrink(아이템들을 얼마나 축소시킬지) 등을 통해 결정할 수 있다.
2. Flexbox의 기본 개념
주축과 교차축을 결정 : flex-direction
주축에서 아이템을 정렬 : justify-content
교차축에서 아이템을 정렬 : align-items
2-1. main axis(주축), cross axis(교차축)
Flexbox에서는 수평, 수직으로 아이템들을 배치하기 위한 두 가지의 축이 존재한다.
여기서 주축(main axis)는 flex-direction에 의해 정의되는 방향이다.
flex-direction
flexbox 컨테이너에서 아이템을 배치할 때 사용할 주축의 방향을 지정한다.
- row (기본값)
주축의 형태는 가로이며, 왼쪽에서 오른쪽으로 아이템이 배치된다.
- column
주축의 형태는 세로이며, 위쪽에서 아래쪽으로 아이템이 배치된다.
- -reverse
row나 column 뒤에 -reverse가 붙으면 아이템이 배치되는 방향이 반대가 된다.
row-reverse의 경우에는 오른쪽에서 왼쪽
column-reverse의 경우에는 아래에서 위쪽
2-2. 교차축
주축에 수직인 방향으로 형성된다.
만약 주축이 가로이면 교차축은 세로가 된다.
2-3. 요소의 배치
flex-direction으로 주축과 교차축이 결정되고 나면 justify-content 어트리뷰트를 통해 요소를 배치할 수 있다.
justify-content
- flex-start
주축의 시작점을 기준으로 배치가 시작된다.
- flex-end
주축의 끝점을 기준으로 배치가 시작된다.
- center
주축의 중앙을 기준으로 배치한다.
- space-between
첫 번째와 마지막 아이템을 주축의 시작점과 끝점에 두고 나머지 항목들은 중앙에 같은 간격으로 배치한다.
- space-around
모든 아이템들을 같은 간격으로 배치한다. 왼쪽, 오른쪽의 빈공간들은 각각 아이템의 절반의 너비를 가진다.
- space-evenly
모든 아이템들이 같은 간격으로 배치된다.
교차축의 배치는 align-items를 통해서 할 수 있다.
align-items
- stretch
아이템들을 교차축 높이에 맞게 확장시킨다.
- flex-start
교차축의 시작점을 기준으로 요소를 배치한다.
- flex-end
교차축의 끝점을 기준으로 배치한다.
- center
교차축의 중앙을 기준으로 배치한다.
- baseline
교차축 시작점과 글자 기준선 간의 거리가 가장 먼 아이템을 기준으로 아이템을 배치한다.
모든 아이템에 같은 교차축 배치를 적용하는 게 아니라 특정 아이템에 따로 교차축 배치를 적용할 경우 align-self를 선택한다.
3. 가상의 사이즈 Hypotehtical size
flex-item 요소는 flex-container보다 더 큰 너비를 가질 수 없다.
일반적인 블록 요소와 flex-item 요소는 다르게 동작한다.
둘 다 동일하게 width: 2000px이 적용됐음에도 불구하고 flex-item은 다른 너비를 가진다.
flex-item은 flex-container 이상의 너비를 가지지 못하기 때문에 현재 뷰포트 이상을 넘어가지 못한다.
4. 아이템의 너비를 늘이거나 줄이기
flex-item의 너비를 얼마나 늘일지 : flex-grow
flex-item의 너비를 얼마나 줄일지 : flex-shrink
flex-item의 기본 너비 지정 : flex-basis
4-1. flex-basis
요소를 가로로 정렬할 경우 flex-item의 너비를, 세로로 정렬할 경우 flex-item의 높이를 결정한다.
