CSS Flexbox 정리

1. Flexbox란?

Flexbox(플렉스박스)는 CSS에서 레이아웃을 쉽게 구성할 수 있도록 도와주는 기능입니다. 부모 요소(컨테이너)와 자식 요소(아이템) 간의 정렬을 직관적으로 조정할 수 있어 반응형 웹 개발에 필수적인 기술입니다.

2. 기본 개념

Flexbox는 부모 요소를 flex 컨테이너로 설정하고, 그 안의 자식 요소들을 flex 아이템으로 배치하는 방식입니다.

2.1 Flex 컨테이너 설정

.container {
  display: flex;
}

display: flex;를 적용하면 .container 내부의 요소들이 Flexbox 규칙을 따르게 됩니다.

2.2 주요 개념

• 메인 축(Main Axis): flex 아이템이 배치되는 기본 방향 (기본값: 가로)
• 교차 축(Cross Axis): 메인 축과 수직 방향의 축
• 플렉스 컨테이너(Flex Container): display: flex;가 적용된 부모 요소
• 플렉스 아이템(Flex Item): 플렉스 컨테이너 내부의 자식 요소들

3. Flex 속성 정리

3.1 컨테이너 속성

속성	설명
display: flex;	Flexbox를 활성화하는 필수 속성
flex-direction	메인 축 방향 설정 (row, column 등)
justify-content	메인 축 정렬 (flex-start, center, space-between 등)
align-items	교차 축 정렬 (flex-start, center, stretch 등)
flex-wrap	아이템 줄바꿈 여부 (nowrap, wrap, wrap-reverse)
align-content	여러 줄 정렬 방식 (stretch, center, space-around 등)

✅ flex-direction

.container {
  display: flex;
  flex-direction: row; /* 기본값: 가로 정렬 */
}

• row: 기본값, 가로 정렬 (왼쪽 → 오른쪽)
• row-reverse: 가로 반대 정렬 (오른쪽 → 왼쪽)
• column: 세로 정렬 (위 → 아래)
• column-reverse: 세로 반대 정렬 (아래 → 위)

✅ justify-content (가로 정렬)

.container {
  display: flex;
  justify-content: center; /* 중앙 정렬 */
}

• flex-start (기본값): 왼쪽 정렬
• center: 중앙 정렬
• flex-end: 오른쪽 정렬
• space-between: 첫 요소는 왼쪽, 마지막 요소는 오른쪽에 배치, 나머지는 균등 배분
• space-around: 요소 사이에 동일한 간격 배치
• space-evenly: 모든 간격을 동일하게 설정

✅ align-items (세로 정렬)

.container {
  display: flex;
  align-items: center; /* 중앙 정렬 */
}

• stretch (기본값): 컨테이너 높이에 맞게 늘어남
• flex-start: 위쪽 정렬
• center: 중앙 정렬
• flex-end: 아래쪽 정렬

3.2 아이템 속성

속성	설명
flex-grow	남은 공간을 차지하는 비율
flex-shrink	줄어드는 비율
flex-basis	기본 크기 설정
align-self	특정 아이템만 정렬
order	아이템 순서 지정

✅ flex-grow (남은 공간 차지 비율)

.item {
  flex-grow: 1; /* 모든 아이템이 같은 비율로 공간 차지 */
}

• 0: 추가 공간을 차지하지 않음 (기본값)
• 1: 남은 공간을 균등하게 나눔
• 2, 3, ...: 값이 클수록 더 많은 공간 차지

✅ flex-shrink (축소 비율)

.item {
  flex-shrink: 0; /* 줄어들지 않도록 설정 */
}

• 1 (기본값): 필요할 때 줄어듦
• 0: 줄어들지 않음

✅ flex-basis (기본 크기 지정)

.item {
  flex-basis: 100px; /* 기본 크기 100px 설정 */
}

• auto (기본값): 콘텐츠 크기 기준
• px, %, vw, vh 등 크기 지정 가능

✅ flex (축약형 속성)

.item {
  flex: 1 1 auto; /* grow | shrink | basis */
}

• flex: 1; → flex: 1 1 0%;와 동일 (공간을 균등 배분)

4. 실전 예제

4.1 기본적인 Flex 레이아웃

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

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

✔ 화면 중앙에 요소들을 배치하는 코드입니다.

4.2 반응형 네비게이션 바

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #333;
  color: white;
}

<div class="nav">
  <div>로고</div>
  <div>메뉴</div>
</div>

✔ 로고와 메뉴를 좌우 정렬하는 네비게이션 바입니다.

5. 정리 & 결론

✅ display: flex;를 사용하면 레이아웃을 쉽게 구성할 수 있다.
✅ justify-content와 align-items를 조합하여 요소를 정렬할 수 있다.
✅ flex-grow, flex-shrink, flex-basis를 활용하여 아이템 크기를 유연하게 조정할 수 있다.
✅ 반응형 디자인을 구현할 때 매우 유용하다!