Skip to Content
BlogCSS 정리많이 사용하는 레이아웃, Flexbox

많이 사용하는 레이아웃, Flexbox

Flexbox는 1차원 레이아웃 을 다루는 CSS 레이아웃 방식이다.
display: flex를 선언한 요소가 flex 컨테이너가 되고, 그 안의 자식 요소들이 flex 아이템이 된다.



기본 축 개념

flex-direction: row(기본값)일 때 주축은 가로, 교차축은 세로이다.
flex-direction: column일 때 주축은 세로, 교차축은 가로이다.

주축(main axis) → flex-direction으로 방향 결정
교차축(cross axis) → 주축에 수직인 축



컨테이너 속성

flex 컨테이너에 적용하는 속성이다.

① display: flex

Flexbox를 시작하는 선언이다.

.container {
  display: flex;
}

② flex-direction

주축의 방향을 결정한다.

.container {
  flex-direction: row;         /* 기본값 — 가로 방향 */
  flex-direction: row-reverse; /* 가로 역방향 */
  flex-direction: column;      /* 세로 방향 */
  flex-direction: column-reverse; /* 세로 역방향 */
}

③ justify-content

주축 방향으로 아이템을 정렬한다.

.container {
  justify-content: flex-start;    /* 기본값 — 시작점 정렬 */
  justify-content: flex-end;      /* 끝점 정렬 */
  justify-content: center;        /* 가운데 정렬 */
  justify-content: space-between; /* 양 끝 배치, 사이 균등 간격 */
  justify-content: space-around;  /* 각 아이템 양쪽 균등 간격 */
  justify-content: space-evenly;  /* 모든 간격 균등 */
}

④ align-items

교차축 방향으로 아이템을 정렬한다.

.container {
  align-items: stretch;     /* 기본값 — 교차축 방향으로 늘어남 */
  align-items: flex-start;  /* 교차축 시작점 정렬 */
  align-items: flex-end;    /* 교차축 끝점 정렬 */
  align-items: center;      /* 교차축 가운데 정렬 */
}

⑤ flex-wrap

아이템이 컨테이너를 넘칠 때 줄바꿈 여부를 결정한다.

.container {
  flex-wrap: nowrap;  /* 기본값 — 줄바꿈 없이 한 줄 */
  flex-wrap: wrap;    /* 넘치면 다음 줄로 */
}

⑥ gap

아이템 사이의 간격을 지정한다.

.container {
  gap: 16px;        /* 행·열 간격 동일 */
  gap: 8px 16px;    /* 행 간격 8px, 열 간격 16px */
}


아이템 속성

flex 아이템에 적용하는 속성이다.

① flex-grow

남은 공간을 아이템이 얼마나 차지할지 비율로 지정한다. 기본값은 0이다.

.item-a { flex-grow: 1; }  /* 남은 공간의 1/3 */
.item-b { flex-grow: 2; }  /* 남은 공간의 2/3 */

② flex-shrink

컨테이너가 좁아질 때 아이템이 얼마나 줄어들지 비율로 지정한다. 기본값은 1이다.

.item {
  flex-shrink: 0; /* 줄어들지 않음 */
  flex-shrink: 1; /* 기본값 — 비율에 따라 줄어듦 */
}

③ flex-basis

아이템의 기본 크기를 지정한다. width와 유사하지만 주축 방향으로 적용된다.

.item {
  flex-basis: 200px; /* 기본 너비 200px */
  flex-basis: auto;  /* 기본값 — 콘텐츠 크기 */
}

④ flex 단축 속성

flex-grow, flex-shrink, flex-basis를 한 번에 작성한다.

.item {
  flex: 1;        /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  flex: 1 0 auto; /* grow shrink basis 순서 */
}

⑤ align-self

개별 아이템의 교차축 정렬을 지정한다. align-items를 덮어쓴다.

.item {
  align-self: flex-start;
  align-self: center;
  align-self: flex-end;
}

⑥ order

아이템의 시각적 순서를 변경한다. 기본값은 0이며, 값이 작을수록 앞에 배치된다.

.item-a { order: 2; }
.item-b { order: 1; } /* item-a보다 앞에 표시 */


자주 쓰는 패턴

수평·수직 가운데 정렬

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

양쪽 끝 정렬 (헤더 레이아웃)

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

균등 분할

.container {
  display: flex;
}
.item {
  flex: 1; /* 모든 아이템이 동일한 너비를 가진다 */
}

body {
  background: #0f172a;
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  color: #e2e8f0;
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
  margin: 0 auto;
}
.section {
  background: #1e293b;
  border-radius: 8px;
  padding: 16px;
}
.label {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0 0 12px;
}
.item {
  background: #3b82f6;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}
 
/* ① 수평·수직 가운데 정렬 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #0f172a;
  border-radius: 6px;
}
 
/* ② 헤더 레이아웃 */
.flex-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0f172a;
  border-radius: 6px;
  padding: 0 16px;
  height: 52px;
}
.logo {
  font-weight: 700;
  color: #f59e0b;
  font-size: 0.9rem;
}
.nav {
  display: flex;
  gap: 8px;
}
.nav .item {
  padding: 6px 12px;
  font-size: 0.8rem;
  background: #1e293b;
}
 
/* ③ 균등 분할 */
.flex-equal {
  display: flex;
  gap: 8px;
}
.flex-equal .item {
  flex: 1;
}
Open on CodeSandboxOpen Sandbox


정리

분류속성설명
컨테이너display: flexFlexbox 시작
컨테이너flex-direction주축 방향
컨테이너justify-content주축 정렬
컨테이너align-items교차축 정렬
컨테이너flex-wrap줄바꿈 여부
컨테이너gap아이템 간격
아이템flex-grow남은 공간 비율
아이템flex-shrink줄어드는 비율
아이템flex-basis기본 크기
아이템flexgrow shrink basis 단축
아이템align-self개별 교차축 정렬
아이템order시각적 순서


마지막 수정