프로필 로고
← 홈으로핸드북 목록

Category

Flex(좌우, 세로 정렬하기)

요소를 좌우로 배치하거나 세로로 나열하고 싶다

가로 배치 vs 세로 배치

flex-direction으로 박스 흐름 방향을 바꿉니다.

핵심 개념주축 방향이 row면 가로, column이면 세로로 흐릅니다.

자주 하는 실수자식에 flex-direction을 주고 부모가 변하지 않는다고 오해하기 쉽습니다.

실무 힌트카드 목록/버튼 그룹을 가로-세로로 전환할 때 사용합니다.

코드

HTML
<div class="container">
  <!-- 1. 첫 번째 박스 -->
  <div class="item">A</div>
  <!-- 2. 두 번째 박스 -->
  <div class="item">B</div>
  <!-- 3. 세 번째 박스 -->
  <div class="item">C</div>
</div>
CSS
/* 1. 부모를 Flex 컨테이너로 지정 */
.container {
  display: flex;

  /* 2. row(가로) 또는 column(세로) */
  flex-direction: row;
}

실시간 미리보기

배치 방향: row (가로)
A
B
C

속성 테스트

배치 방향

가로축 정렬 위치

justify-content로 요소를 시작/중앙/양끝으로 배치합니다.

핵심 개념justify-content는 주축(main axis)에서 아이템의 위치를 정합니다.

자주 하는 실수세로 정렬까지 같이 바뀐다고 생각하는 경우가 많습니다.

실무 힌트헤더 메뉴 좌우 정렬, 버튼 행 분산 배치에 자주 씁니다.

코드

HTML
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
CSS
/* 1. 주축(main axis) 정렬 */
.container {
  display: flex;
  justify-content: flex-start;
}

실시간 미리보기

가로축 정렬: flex-start
A
B
C

속성 테스트

가로축 정렬

세로축 정렬 맞추기

align-items로 세로축 정렬 위치를 바꿉니다.

핵심 개념align-items는 교차축(cross axis)에서 전체 아이템 정렬을 맞춥니다.

자주 하는 실수justify-content와 축 방향을 헷갈려 반대로 적용하기 쉽습니다.

실무 힌트아이콘/텍스트의 수직 정렬, 카드 내부 정렬에 자주 사용됩니다.

코드

HTML
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
CSS
/* 1. 교차축(cross axis) 정렬 */
.container {
  display: flex;
  align-items: center;
}

실시간 미리보기

세로축 정렬: center
A
B
C

속성 테스트

세로축 정렬

줄바꿈, 간격, 줄 그룹 정렬

flex-wrap과 gap, align-content를 같이 바꿔 멀티라인 정렬을 이해합니다.

핵심 개념align-content는 여러 줄이 생겼을 때 줄 그룹의 세로 배치를 정합니다.

자주 하는 실수줄이 1개일 때 align-content 변화가 안 보이는 이유를 놓치기 쉽습니다.

실무 힌트태그 목록, 칩 리스트 같은 줄바꿈 레이아웃에서 유용합니다.

코드

HTML
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
</div>
CSS
/* 1. 줄바꿈 허용 */
.container {
  display: flex;
  flex-wrap: wrap;

  /* 2. 아이템 간격 */
  gap: 8px;

  /* 3. 여러 줄 정렬 */
  align-content: flex-start;
}

실시간 미리보기

줄바꿈: wrap간격: 8px줄 그룹 정렬: flex-start
A
B
C
D
E
F
G
H
I

속성 테스트

줄바꿈

간격

줄 그룹 정렬

남는 공간 분배 (flex-grow)

flex-grow 값으로 item A가 남는 공간을 얼마나 가져갈지 비교합니다.

핵심 개념flex-grow는 남는 공간을 비율로 가져가는 값입니다.

자주 하는 실수width를 고정해두고 grow가 안 먹는다고 오해하기 쉽습니다.

실무 힌트탭 메뉴, 비율형 버튼 그룹, 카드 강조 배치에 사용합니다.

코드

HTML
<div class="container">
  <div class="item item-a">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
CSS
/* 1. Flex 컨테이너 */
.container {
  display: flex;
  gap: 10px;
}

/* 2. 공통 아이템 기본값 */
.item {
  flex: 0 1 90px;
}

/* 3. B는 grow 1 고정 */
.item:nth-child(2) {
  flex: 1 1 90px;
}

/* 4. item-a grow만 토글 */
.item-a {
  flex-grow: 1;
}

실시간 미리보기

item A grow: 1 (B와 동일)
A
B
C

속성 테스트

item A grow

공간이 부족할 때 축소 (flex-shrink)

컨테이너 폭이 좁을 때 item A의 shrink 비율 변화를 확인합니다.

핵심 개념flex-shrink는 공간이 부족할 때 줄어드는 비율입니다.

자주 하는 실수shrink가 0이면 절대 안 줄어드는 것이 아니라 기준에 따라 다르게 보일 수 있습니다.

실무 힌트중요 버튼/요소를 덜 줄이고 부가 요소를 더 줄일 때 유용합니다.

코드

HTML
<div class="container">
  <div class="item item-a">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
CSS
/* 1. 좁은 폭 컨테이너 */
.container {
  display: flex;
  width: 300px;
  gap: 8px;
}

/* 2. 공통 기준 너비 (B/C) */
.item {
  flex: 0 1 120px;
}

/* 3. A는 더 큰 기준 너비 */
.item-a {
  flex-basis: 200px;

  /* 4. shrink 값만 토글 */
  flex-shrink: 1;
}

실시간 미리보기

item A shrink: 1
A
B
C

속성 테스트

item A shrink

기본 크기 기준 (flex-basis)

item A의 시작 너비를 flex-basis로 바꿔 배치 차이를 확인합니다.

핵심 개념flex-basis는 grow/shrink 계산 전에 쓰는 기본 크기입니다.

자주 하는 실수width와 basis를 동시에 주고 어떤 값이 먼저인지 헷갈리기 쉽습니다.

실무 힌트카드 기본 폭, 좌측 사이드 영역 같은 초기 비율 설정에 사용합니다.

코드

HTML
<div class="container">
  <div class="item item-a">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
CSS
/* 1. Flex 컨테이너 */
.container {
  display: flex;
  gap: 10px;
}

/* 2. 공통 아이템 기본값 */
.item {
  flex: 0 0 auto;
  width: 100px;
}

/* 3. item-a 기준 크기만 토글 */
.item-a {
  flex-basis: 120px;
}

실시간 미리보기

item A basis: 120px
A
B
C

속성 테스트

item A basis

순서 변경 + 개별 정렬

item A만 순서를 바꾸거나 교차축 정렬을 다르게 적용합니다.

핵심 개념order와 align-self는 특정 아이템 하나만 따로 제어할 수 있습니다.

자주 하는 실수컨테이너 속성으로 개별 아이템 정렬을 바꾸려다 원하는 결과를 못 얻습니다.

실무 힌트강조 카드 우선 배치, 특정 버튼만 아래/위 정렬할 때 자주 사용합니다.

코드

HTML
<div class="container">
  <div class="item item-a">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
CSS
/* 1. 컨테이너 기본 정렬 */
.container {
  display: flex;
  align-items: flex-start;
  min-height: 220px;
  gap: 10px;
}

/* 2. item-a 개별 제어 */
.item-a {
  order: 0;
  align-self: flex-start;
}

실시간 미리보기

item A order: 0item A align-self: flex-start
A
B
C

속성 테스트

item A order

item A align-self