CSS Flexbox 완전 정복

CSS Flexbox 완전 정복

Flexbox는 1차원 레이아웃을 위한 CSS 모듈로, 요소들을 행(row) 또는 열(column) 방향으로 유연하게 배치할 수 있습니다.

언제 사용하나요?

• 네비게이션 바, 헤더 레이아웃


• 카드 리스트 정렬


• 수직/수평 중앙 정렬


• 요소 간 균등 배치


• 반응형 아이템 배치

기본 사용법

.container {
    display: flex;  /* Flexbox 활성화 */
}

/* 자식 요소들이 자동으로 flex item이 됨 */

주축 방향 (flex-direction)

.container {
    display: flex;
    flex-direction: row;          /* 가로 (기본값) → */
    flex-direction: row-reverse;  /* 가로 역방향 ← */
    flex-direction: column;       /* 세로 ↓ */
    flex-direction: column-reverse; /* 세로 역방향 ↑ */
}

주축 정렬 (justify-content)

.container {
    display: flex;
    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 {
    display: flex;
    align-items: stretch;     /* 늘려서 채움 (기본) */
    align-items: flex-start;  /* 위쪽 정렬 */
    align-items: flex-end;    /* 아래쪽 정렬 */
    align-items: center;      /* 수직 중앙 */
    align-items: baseline;    /* 텍스트 기준선 정렬 */
}

완벽한 중앙 정렬

/* 가장 많이 쓰는 패턴 */
.container {
    display: flex;
    justify-content: center;  /* 가로 중앙 */
    align-items: center;      /* 세로 중앙 */
    height: 100vh;
}

줄바꿈 (flex-wrap)

.container {
    display: flex;
    flex-wrap: nowrap;   /* 한 줄 (기본) - 넘치면 축소 */
    flex-wrap: wrap;     /* 여러 줄 - 넘치면 다음 줄 */
    flex-wrap: wrap-reverse; /* 역방향 줄바꿈 */
}

아이템 속성 (flex-grow, flex-shrink, flex-basis)

.item {
    flex-grow: 0;    /* 남는 공간 차지 비율 (기본 0) */
    flex-shrink: 1;  /* 공간 부족시 축소 비율 (기본 1) */
    flex-basis: auto; /* 기본 크기 */
}

/* 축약형 */
.item {
    flex: 0 1 auto;  /* grow shrink basis */
    flex: 1;         /* flex: 1 1 0% - 균등 분배 */
    flex: auto;      /* flex: 1 1 auto */
    flex: none;      /* flex: 0 0 auto - 고정 크기 */
}

개별 아이템 정렬 (align-self)

.item {
    align-self: auto;       /* 컨테이너 설정 따름 */
    align-self: flex-start; /* 이 아이템만 위 */
    align-self: flex-end;   /* 이 아이템만 아래 */
    align-self: center;     /* 이 아이템만 중앙 */
}

실전 예시 1: 네비게이션 바

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
}

.nav-logo { }  /* 왼쪽 */
.nav-links {   /* 오른쪽 */
    display: flex;
    gap: 20px;
}

실전 예시 2: 카드 리스트

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 300px;  /* 최소 300px, 균등 확장 */
    max-width: 400px;
}

실전 예시 3: 푸터 고정

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;  /* 남는 공간 모두 차지 */
}

.footer {
    /* 자동으로 하단에 고정 */
}

실전 예시 4: 미디어 객체

.media {
    display: flex;
    gap: 15px;
}

.media-image {
    flex-shrink: 0;  /* 이미지 축소 방지 */
    width: 80px;
}

.media-content {
    flex: 1;  /* 텍스트가 나머지 차지 */
}

gap 속성 (간격)

.container {
    display: flex;
    gap: 20px;           /* 모든 간격 */
    gap: 10px 20px;      /* 행 열 간격 */
    row-gap: 10px;       /* 행 간격만 */
    column-gap: 20px;    /* 열 간격만 */
}

order (순서 변경)

.item { order: 0; }     /* 기본값 */
.item:first-child { order: 2; }  /* 마지막으로 이동 */
.item:last-child { order: -1; }  /* 처음으로 이동 */

Flexbox vs Grid