CSS Layout 정리

CSS 레이아웃 속성은 많지만, 실무에서 자주 쓰는 건 정해져 있는 경우가 많다.

핵심만 빠르게 정리해보자..!

 

 

가운데 정렬

Flexbox 하나로 수평/수직 모두 해결

/* 화면 전체 가운데 정렬 */
.container {
  display: flex;
  justify-content: center;  /* 수평 */
  align-items: center;     /* 수직 */
  height: 100vh;
}

 

 

Flexbox vs Grid

Flexbox

- 1차원 (한 방향으로 나열)

- 메뉴, 버튼

/* 아이템을 가로로 쭉 나열 */
.nav {
  display: flex;
  gap: 16px;
}

 

Grid

- 2차원 (행과 열 동시에 다룰 때)

- 대시보드, 카드 목록

/* 3열짜리 카드 레이아웃 */
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

 

 

gap으로 간격 관리

/* 이렇게 하면 마지막 요소 margin 처리가 번거로움 */
.item + .item {
  margin-left: 16px;
}

/* gap으로 한 방에 */
.container {
  display: flex;
  gap: 16px;
}

 

 

position 핵심

값	동작
static	기본값
relative	원래 자리 기준으로 이동
absolute	가장 가까운 relative 부모 기준
fixed	뷰포트 기준, 스크롤 해도 고정 됨
sticky	스크롤하다가 특정 위치에서 고정

 

 

 

Flexbox 정리

 

부모 속성

flex-direction: 방향 설정

.container {
  display: flex;
  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;     /* 가운데 */
  align-items: baseline;   /* 텍스트 기준선 */
}

 

flex-wrap: 줄바꿈

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

 

 

자식 속성

flex: 크기 비율

/* 남는 공간을 동등하게 나눔 */
.item { flex: 1; }

/* 1:2:1 레이아웃 */
<aside style="flex: 1">사이드바</aside>
<main  style="flex: 2">메인 콘텐츠</main>
<aside style="flex: 1">사이드바</aside>

 

align-self: 개별 정렬

.container { align-items: center; }

/* 이 아이템만 아래쪽 정렬 */
.special { align-self: flex-end; }

 

order: 순서 변경

.item-a { order: 2; }
.item-b { order: 1; } /* item-b가 먼저 보임 */

 

---

연습은 Flexbox Froggy (flexboxfroggy.com) 에서 가능!!