Flexbox를 활용한 고급 CSS 레이아웃 구성 방법

CSS3는 플렉시블 박스(Flexible Box), 흔히 Flexbox라고 불리는 레이아웃 모드를 제공합니다. Flexbox를 사용하면 복잡한 웹 애플리케이션과 웹 페이지의 레이아웃을 손쉽게 만들 수 있습니다.

Flexbox 컨테이너의 주요 속성

Flexbox 레이아웃은 컨테이너(container)와 플렉스 아이템(flex items)으로 구성됩니다. 컨테이너에 적용할 수 있는 대표적인 속성은 다음과 같습니다.

flex-direction — 플렉스 아이템이 배치되는 주축(main axis)의 방향을 지정합니다.
flex-wrap — 아이템이 한 줄에 배치되거나 여러 줄로 줄바꿈되도록 설정합니다.
flex-flow — flex-direction과 flex-wrap을 한 번에 지정하는 축약형 속성입니다.
justify-content — 주축 방향으로 아이템들을 정렬하고 간격을 분배합니다.
align-items — 교차축(cross axis) 방향으로 아이템들을 정렬합니다.
align-content — 여러 줄로 배치된 플렉스 라인 전체를 교차축 방향으로 정렬합니다.

Flexbox 고급 레이아웃 예제 코드

아래는 Flexbox를 활용해 여러 개의 하위 컨테이너를 다양한 방식으로 정렬하는 고급 CSS 레이아웃 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: lightblue;
}
.container1 {
    align-self: flex-start;
    display: flex;
    background-color: rgb(71, 30, 255);
    width: 200px;
    margin: 20px;
}
.container1 > div {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 10px;
    font-size: 30px;
}
.container2 {
    display: flex;
    background-color: rgb(14, 126, 79);
    width: 200px;
    justify-content: center;
    align-self: flex-start;
    margin: 20px;
}
.container2 > div {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 10px;
    font-size: 30px;
}
.container3 {
    display: flex;
    flex-direction: column;
    background-color: rgb(168, 60, 10);
    width: 200px;
    align-items: center;
    margin: 20px;
}
.container3 > div {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 10px;
    width: 20px;
    font-size: 30px;
}
</style>
</head>
<body>
<h1>Flex layout example</h1>
<div class="container">
<div class="container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>

예제 코드 설명

.container — 최상위 컨테이너로 display: flex와 flex-wrap: wrap을 적용해 화면 크기에 따라 자동으로 줄바꿈되며, justify-content: space-evenly로 하위 요소들이 균등한 간격으로 배치됩니다.
.container1 — 기본 가로(row) 방향으로 아이템을 배치하며, align-self: flex-start로 교차축 상단에 정렬됩니다.
.container2 — justify-content: center를 적용해 아이템들이 가로 방향 중앙에 정렬됩니다.
.container3 — flex-direction: column으로 세로 방향 배치를 지정하고, align-items: center로 아이템들을 중앙 정렬합니다.

실행 결과

위 코드를 실행하면 파란색 배경의 메인 컨테이너 안에 보라색, 초록색, 주황색 하위 컨테이너가 균등한 간격으로 배치된 것을 확인할 수 있습니다. 각 하위 컨테이너는 서로 다른 정렬 방식(왼쪽 정렬, 중앙 정렬, 세로 중앙 정렬)으로 숫자 아이템들을 표시하므로, Flexbox의 다양한 정렬 속성이 실제 화면에서 어떻게 동작하는지 한눈에 비교해볼 수 있습니다.