Flexbox 총정리

June·2022년 1월 30일

레플릿 문제를 풀다가 flexbox에 대해 자꾸 헷갈려서 드림코딩앨리님 영상을 참고하여 정리해보았다 😀

Flexbox는 css의 꽃! 이전에 배웠던 float보다 훨씬 쓰기 편하다. Flexbox는 모던 웹을 위하여 제안된 CSS3의 새로운 layout 방식이다.

Box가 커지면 각각의 item들이 어떤 식으로 커지면서 box의 공간을 메꾸고, 작아지면 어떻게 유연하게 배치해야 하는 지를 자유롭게 정의할 수 있다.

Flexbox에는 총 두 가지만 이해하면 큰 그림을 그릴 수 있다.

첫 번째로는,

이 flexbox에는 container, 즉 박스 자체에 적용되는 속성값이 존재하고 또 각각그 안의 item들에 적용할 수 있는 속성 값들이 존재한다.

container에 우리가 꾸며줄 수 있는 속성 값 ✅

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

item에 지정되는 속성 값 ✅

orer
flex-grow
flex-shrink
flex
align-self

두 번째로는,

flexbox에는 중심 축과 반대 축을 이해해야 한다. 수직 축이 중심 축이 되면, 수평축은 반대 축이 된다. 아이템들은 기본적으로 왼쪽에서 오른쪽으로 정렬이 되는데, 이럴 경우 이 수평 축이 중심축이 되고, 반대로 이 수직축이 반대축이 된다.

개념 정리

먼저 flexbox를 쓰고 싶으면, 박스의 역할을 하는 container 클래스에 'display: flex'를 입력해줍니다.

.container {
	display: flex;
}

flex-direction

컨테이너 안에서 요소들이 정렬해야 할 방향을 지정한다.

row : 요소들을 텍스트의 방향과 동일하게 정렬한다.
row-reverse : 요소들을 텍스트의 반대 방향으로 정렬한다.
colum : 요소들을 위에서 아래로 정렬한다.
colum-reverse : 요소들을 아래에서 위로 정렬한다.

column-reverse 또는 row-reverse를 사용하면 아이템들의 순서도 바뀐다.

justify-content

Item들을 컨테이너에 어떻게 배치할 건지 결정한다.

flex-start : 요소들을 컨테이너의 왼쪽으로 정렬 (기본값)
flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
center : 요소들을 컨테이너의 가운데로 정렬
space-between : 요소들 사이에 동일한 간격을 둔다.
space-around : 요소들 주위에 동일한 간격을 둔다.

align-items

반대 축에서 어떻게 정렬할 지 결정한다.

flex-start : 요소들을 컨테이너의 위로 정렬
flex-end : 요소들을 컨테이너의 바닥으로 정렬
center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
baseline : 요소들을 컨테이너의 시작 위치에 정렬한다.
stretch : 요소들을 컨테이너에 맞도록 늘린다.