Flexbox란?

유연한 반응형 레이아웃을 설계하기 위해 추가된 속성으로, 1차원 영역으로 수평과 수직 영역을 분리하는 속성

• container(외부 레이아웃)에 맞춰 item이 알아서 크기를 변경하도록 설계가 가능하다.

---

1. Flexbox 기본 개념

1) Flex Container & Flex Items

• Flex Container : Flexbox를 적용하고 싶은 요소의 부모 요소에 display: flex; 속성을 정의하여 부모 요소를 Flex Container로 만든다.
• Flex Items : Flex Container 내부의 자식 요소(직계 자식)들이 배치의 대상이 된다.

HTML

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS

.flex-container {
  display: flex;
  gap: 5px;
  width: 220px;
  padding: 10px;
  background-color: #efefef;
}
.flex-item {
  width: 50px;
  padding: 10px;
  background-color: tomato;
}

2) Main Axis(주축) & Cross Axis(교차축)

• Main Axis : flex-direction으로 설정된 요소의 기본 배치 방향 (기본값 : 수평)
• Cross Axis : 주축에 수직인 방향 (ex. 주축이 수평이면 교차축은 수직)

Flexbox의 모든 속성이 주축 및 교차축과 연관되어 있기 때문에 꼭 이해해야 한다.

---

2. Flexbox 주요 속성

1) flex-direction

컨테이너가 Flex item을 쌓을 방향(주축의 방향)을 정의하는 속성
위, 아래, 오른쪽, 왼쪽 4방향으로 시작 방향을 설정할 수 있다.

• row : 왼쪽에서 오른쪽으로 (기본값)
• row-reverse : 오른쪽에서 왼쪽으로
• column : 위에서 아래로
• column-reverse : 아래에서 위로

2) flex-wrap

Flex item이 한 줄에 수용되지 않을 경우의 동작
Flex item들이 컨테이너의 정해진 크기보다 큰 경우 이를 여러 줄로 표시할지 혹은 컨테이너 사이즈 이내로 제한할지 정하는 속성

• nowrap : box 크기를 줄여서 한 줄에 모두 배치 (기본값)
• wrap : 정해진 box 크기로 여러 줄로 나누어 배치
• wrap-reverse : 시작점과 끝점을 바꾸고 여러 줄로 나누어 배치

3) justify-content (주축 기준 정렬)

Flex item을 주축 기준으로 정렬하거나 정렬하고 남은 영역을 어떻게 채울지에 대한 옵션

• flex-start : 주축 시작점 기준으로 정렬
• flex-end : 주축 끝점 기준으로 정렬
• center : 주축 중앙 기준으로 정렬
• space-between : 주축 시작점과 끝점 배치 후 중간 항목은 같은 간격으로 정렬
• space-arount : 전체 항목을 같은 간격으로 정렬

4) align-items (교차축 기준 정렬)

justify-content와 다른 방향인 교차축 기준으로 정렬하는 방법

• flex-start : 교차축 시작점 기준으로 배치
• flex-end : 교차축 끝점 기준으로 배치
• center : 교차축 중앙 기준으로 배치
• baseline : 교차축 기준선에 맞춰 배치
• stretch : 전체 항목을 늘려 간격으로 배치

5) align-content & align-self

• align-content :Flex item이 여러 줄이 되었을 때 item들의 교차축 기준 정렬 방법을 지정
• align-self : justify-content와 유사하지만, 컨테이너가 아닌 아이템을 교차축을 기준으로 정렬하는 방법

6) flex-grow & flex-shrink & flex-basis

• flex-grow : 여백이 있는 경우 item 간의 비율을 얼마나 키울지 정하는 속성
• flex-shrink : 여백이 있는 경우 item을 얼마나 줄일지 정하는 속성 (이때 0인 속성은 줄어들지 않음)
• flex-basis : 자식 요소의 초기 크기를 지정
• flex: grow shrink basis : 위 세 가지 속성을 한번에 지정