📍 Flexbox란?
CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구이다.
- 박스와 아이템들을 행 또는 열로 자유롭게 배치시켜줄 수 있는 기능이다.
- flex box 이전에는 table, position, float을 사용했다.
✍️ float 원래의 목적은 이미지와 텍스트들을 어떻게 배치할 건지 정의하기 위한 것인데, html에서 레이아웃 구성을 하기 열악했던 과거에 float을 여러 용도로 사용하다보니, 원래 목적에서 벗어나게 되었다가 flex box가 나오면서 float은 다시 원래 목적대로 사용할 수 있게 되었다고 한다.
1. Flexbox의 특징
FlexBox를 사용하기 위해서는 두 단계의 태그가 필요하다.
- 컨테이너의 역할을 하는 부모 태그
- 아이템의 역할을 하는 자식 태그
container에 들어가는 속성값과 item에 들어가는 속성값이 나뉜다.
중심축과 반대축이 있다.
- 중심축을 수직 or 수평에 두는지에 따라서 반대축이 바뀐다.
ex.) item들이 위에서 아래로 즉, 수직으로 정렬된다면 중심축은 수직, 반대축은 수평이다.
2. Flex Container
flex-direction
: flexbox의 메인축을 결정한다. item들을 어떤 방향으로 놓을지 정한다.
flex-direction: row; (기본값) : 수평방향 정렬이다. (left → right)
flex-direction: row-reverse; : 수평방향 반대 정렬이다. (right → left)
flex-direction: column; : 수직방향 정렬이다. (top → bottom)
flex-direction: column-reverse; : 수직방향 반대 정렬이다. (bottom → top)
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap
: 한 줄에 item이 가득 찼을 때 줄을 넘어갈지 결정한다.
flex-wrap: nowrap; (기본값) : 모든 item들이 한 줄에 정렬된다.
flex-wrap: wrap; : item들이 여러 라인에 배치된다. (top → bottom)
flex-wrap: wrap-reverse; : item들이 여러 라인으로, 아래에서 위로 배치된다. (bottom → top)
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}📌 flex-flow
: (flex-direction + flex-wrap) shorthand
.container { flex-flow: column wrap; }
justify-content
: 중심축에 따라 정렬한다. 여백을 남기고 싶을 때 사용한다.
justify-content: flex-start; (기본값) : item을 시작점 쪽으로 모은다.
justify-content: flex-end; : item을 끝점 쪽으로 모은다.
justify-content: center; : item을 라인의 중앙으로 모은다.
justify-content: space-between; : 첫번째 item은 시작점, 마지막 item은 끝점에 있고, 공백을 균등하게 나눈다.
justify-content: space-around; : item마다 양옆으로 똑같은 사이즈의 공백을 가진다. 가장자리 공백은 각 item사이 공백보다 작다.
justify-content: space-evenly; : 각item 사이와 가장자리 공백 모두 동일하다.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
align-items
: 반대축에 따라 item을 정렬한다.
align-items: stretch; (기본값) : container를 모두 채우도록 늘린다.(min-width / max-width 값은 지킨다.)
align-items: center; : item을 라인의 중앙으로 모은다.
align-items: baseline; : item들이 baseline에 맞춰 정렬된다
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
align-content
: 반대축에 따라 item을 정렬한다. flex line 을 정렬한다.
❗️nowrap인 경우(하나의 라인을 이루는 경우) 사용하는 의미가 없다.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}✍️ align-content & align-items 구분하기 !
align-content
: flex line을 정렬한다. nowrap인 경우 사용하는 의미가 없다. nowrap은 강제로 한 줄에 그리는 것이므로 flex line이 한 줄이기 때문이다.align-items
: flex line을 기준으로 아이템을 정렬한다. align-itmes는 line이 한 줄인 경우에도 그 라인 안에서 정렬하는 것이기 때문에 작동한다.
3. Flex Items
order
: item들의 순서를 바꿀때 사용한다.
.item {
order: 5; /* default is 0 */
}
flex-grow
: container 크기가 늘어날때 각 item이 어떤 비율로 커질지 결정한다.
단위(px, em등)가 없는 값을 지정하며(숫자만 적음) 이는 비율을 의미한다. 음수는 사용 불가능하다.
.item {
flex-grow: 4; /* 기본값: 0 */
}flex-shrink
: container 크기가 줄어들때 각 item이 어떤 비율로 줄어들지 결정한다.
음수는 사용 불가능하다.
.item {
flex-shrink: 3; /* 기본값: 1 */
}flex-basis
: container 크기가 변하기 전인 기본 상태에서의 사이즈를 결정한다.
아이템들이 공간을 얼마나 차지할지 더 세부적으로 명시한다. (각각 60% 30% 10%를 차지하게 하는지 등을 지정할 수 있다.)
.item {
flex-basis: | auto; /* 기본값: auto */
}📌 flex
: (flex-grow + flex-shrink + flex-basis) shorthand
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
- 기본값:
0 1 auto- 두번째
flex-shrink, 세번째flex-basis매개변수는 필수가 아니다.
✍️ 각각의 속성을 따로 설정하는 것 보다 flex 를 사용해서 한줄로 짧게 작성하는 것이 좋다고 한다!
align-self
: item별로 정렬 할 수 있다.(컨테이너에 지정된 것을 벗어나서 아이템 하나만 개별 지정 가능하다.)
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}▶ playground 직접 설정해 보면서 확인하기 좋다. 😀
reference
flexbox Coding-Everybody
