[CSS] Flexbox란?

Flexbox 에서는 ...

1. 배치할 방향 : flex-direction
2. 정렬하기 : justify-content, align-items
3. 요소가 넘칠 때 : flex-wrap
4. 요소 간격 : gap
5. 크기 늘이거나 줄이기 : flex-grow(얼마나 늘릴지), flex-shrink(얼마나 줄일지), flex-basis(앞에 두가지 한번에 쓰기)

플렉스박스 만들기

display: flex;

기본 축과 교차 축

배치 방향

flex-direction을 사용하면 기본 축의 방향을 정할 수 있다. 이때 기본 값은 row
이다.

기본 축 정렬: justify-content

justify-content를 사용하면 기본 축 방향으로 정렬할 수 있다. 기본 값은 flex-start이다.

교차 축 정렬: align-items

교차 축 방향으로 정렬할 때는 align-items를 사용한다. 기본 값은 stretch(늘려서 배치하기)이다.

요소가 넘칠 때: flex-wrap

요소가 넘치는 경우 flex-wrap: wrap을 지정해주면 교차 축 방향으로 넘어가서 배치된다.

간격: gap

숫자를 하나만 쓰면, 모든 방향의 간격을 지정할 수 있다.

세로, 가로 순서대로 숫자를 두 개 쓰면 세로 간격, 가로 간격을 지정할 수 있다. 이때 세로와 가로는 기본 축 방향이랑은 상관없다.

요소 늘려서 채우기: flex-grow

기본 값은 0이다. flex-grow값이 클수록 많이 늘어난다.

요소 줄여서 채우기: flex-shrink

만약 요소들의 크기가 커서 넘치는 경우, 요소의 크기를 줄여서 플렉스박스 안에 가득 채운다. flex-shrink의 기본 값이 1이기 때문에 기본적으로 요소를 줄여서 배치하고, 0으로 지정하면 크기가 줄어들지 않는다. 그러고 flex-shrink값이 클수록 상대적으로 많이 줄어든다.

출처 : 코드잇 <CSS 레이아웃>