1. flexbox 축
(1) Main Axis (flex-direction으로 정의)
- row, row-reverse : 인라인 방향으로 행을 따른다(가로축).
- column, column-rverse : 상단에서 하단으로 블록 방향을 따른다(세로축).
(2) Cross Axis
- 주축(flex-direction)에 대한 수직 축을 말한다.
- 주축이 row, row-reverse 면 열 방향이다(세로축).
- 주축이 column, column-reverse 면 행 방향이다(가로축)
(3) 예시 : flex-direction : row의 주축과 교차축
2. 시작선과 끝선
- flexbox는 글씨를 쓰듯 오른쪽에서 왼쪽으로 요소가 배치되는 것을 가정하지 않는다.
- 요소는 start에서 시작해 end에서 끝난다.
- flex-direction의 reverse는 start와 end의 위치를 뒤집는 것을 말한다(즉, end←start).
3-1. flex 컨테이너
- flexbox를 담는 컨테이너를 말한다. 이 컨테이너의 일차 자식(direct children)요소가 flex 항목이 된다.
- display: flex 또는 inline-flex로 지정한다.
- flex 컨테이너의 특징
- flex-direction의 기본값은 row다. (flex항목은 가로로 나열된다.)
- felx항목은 cross aixs를 채우기 위해 늘어난다. (즉, flex 항목의 height는 flex 컨테이너에 맞춰진다.)
- flex-basis의 기본값은 auto다.
- flex-wrap의 기본값은 nowrap이다(요소를 main aixs방향으로 한 줄에 배치한다.)
3-2 flex-wrap
- flex 컨테이너의 flex-wrap속성 기본값은 nowrap이다. 따라서 flex항목을 한 줄로 배치한다.
- nowrap : 요소를 한 줄로 배치
- wrap : 요소가 flex 컨테이너 크기를 넘어갈 경우 여러 행에 걸쳐 배치
- wrap-reverse : wrap속성과 동일하지만 요소가 나열되는 start와 end가 반대로 배치
3-3. flex-flow
- flex-direction 속성과 flex-wrap속성을 합친 것이다. (즉, 배치 방향과 여러줄 배치를 허용할지를 정의한다.)
- flex-flow : flex-direction값 flex-wrap값 ex) flex-flow: row wrap;
3-4. 요소 정렬, 끝 맞추기
(1) Main axis (justify-content 속성)
- flex-start(default): 컨테이너의 시작선에서부터 정렬
- flex-end : 컨테이너의 끝선에 정렬
- center : 컨테이너의 가운데에 정렬
- space-around : 시작선과 끝선을 기준으로 항목을 컨테이너에 균등하게 분배
- space-between : 시작선과 끝선 및 항목 간 공간을 고려해 항목을 컨테이너에 균등하게 분배
- space-envely : 완전 균등하게 분배(시작선과 끝선에도 공간 배분)
(2) Cross axis (align-items 속성)
- stretch(default) : 컨테이너에서 가장 큰 flex항목 크기만큼 커진다. 항목이 하나인 경우 컨테이너 크기만큼 커진다.
- flex-start : flex항목이 cross axis 시작선에 정렬된다.
- flex-end : flex항목이 cross axis 끝선에 정렬된다.
- center : flex항목이 cross axis의 중앙에 정렬된다.
4-1. flex 항목
- flex 컨테이너의 일차 자식(direct children)이다.
4-2. flex-basis
- flex 항목의 크기를 결정한다.
- 기본값은 auto이다. 이 때는 내용물 크기만큼 공간을 차지한다.
4-3. flex-grow
- flex 항목이 컨테이너에서 공간을 차지하는 비율을 말한다.
ex) 컨테이너에 3개 항목이 있을 때, 각 항목의 flex-grow를 2, 1, 1로 지정하면 2:1:1의 비율로 공간을 차지한다.
4-4. flex-shrink
- 컨테이너에서 남는 공간이 부족할 때 flex 항목의 사이즈를 줄이는 방법을 정의한다.
- 더 큰 flex-shrink 값을 가질수록 더 많이 줄어든다.
ex) 컨테이너에 2개 항목이 있을 때, 각 항목의 flex-shrink를 2, 1로 지정하면 첫 번째 요소가 2:1 비율로 더 작아진다.
4-5. flex
- 위의 세 속성을 하나로 합친 것이다.
- flex : flex-grow flex-shrink flex-basis 형태로 사용한다.
[참조] flexbox의 기본 개념