Flexbox로 레이아웃을 자유롭게

Flexbox는 웹페이지의 요소를 가로 또는 세로 한 줄로 정렬하고, 남는 공간을 효율적으로 채우거나 분배하는 데 최적화된 CSS 레이아웃 모델입니다. 복잡한 계산 없이도 반응형 디자인을 쉽게 만들 수 있어, 현대 퍼블리싱의 필수 요소라고 할 수 있죠.

핵심 개념: 부모(컨테이너)와 자식(아이템)

Flexbox는 항상 **부모 요소(Flex Container)**에 속성을 부여하여 그 안에 있는 **자식 요소(Flex Item)**들을 정렬하고 배치합니다.

Flexbox 사용법: 단 2단계!

1단계: 부모 요소를 Flex Container로 만들기

자식 요소들을 Flexbox의 규칙에 따라 배치하고 싶다면, 먼저 **부모 요소에 `display: flex;` 속성을 부여해야 합니다.

html
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>

css
.container {
display: flex; /* 이것만으로 자식들이 가로로 한 줄에 정렬됩니다! */
border: 2px solid blue;
padding: 10px;
}

.item {
background-color: lightgray;
padding: 20px;
margin: 5px;
border: 1px solid gray;
}

* `display: flex;`를 추가하는 순간, `.item`들은 자동으로 가로 방향(기본값: `row`)으로 한 줄에 나란히 정렬됩니다.

2단계: 자식 요소들을 어떻게 정렬할지 부모에서 설정하기

이제 `display: flex;`를 준 부모(`.container`)에게 다음과 같은 속성들을 추가하여 자식(`.item`)들의 정렬 방식을 제어할 수 있습니다.

* **`justify-content` (주축 정렬):** 가로 방향(기본값)으로 자식들을 어떻게 배치할지 결정합니다.
* `flex-start`: 시작점에 정렬 (기본)
* `flex-end`: 끝점에 정렬
* `center`: 가운데 정렬
* `space-between`: 양쪽 끝에 하나씩, 나머지 균등 배치
* `space-around`: 자식 주변에 균등한 공간 배치
* `space-evenly`: 자식 사이와 양 끝에 모두 균등한 공간 배치

css
.container {
display: flex;
justify-content: center; /* 자식들을 가로 중앙에 정렬 */
}


*`align-items` (교차축 정렬):** 세로 방향(기본값)으로 자식들을 어떻게 배치할지 결정합니다.
* `flex-start`: 시작점에 정렬
* `flex-end`: 끝점에 정렬
* `center`: 가운데 정렬
* `stretch`: 컨테이너 높이에 맞춰 늘리기 (기본)
* `baseline`: 텍스트 기준선에 맞춰 정렬

css
.container {
display: flex;
height: 150px; /* 세로 정렬을 위해 높이 지정 */
align-items: center; /* 자식들을 세로 중앙에 정렬 */
}


* `flex-direction` (정렬 방향):** 자식들을 가로로 놓을지 (`row`) 세로로 놓을지 (`column`) 결정합니다.
* `row`: 가로 (기본값)
* `column`: 세로

css
.container {
display: flex;
flex-direction: column; /* 자식들을 세로 방향으로 정렬 */
}


*`flex-wrap` (줄 바꿈):** 자식들이 한 줄에 들어가지 않을 때 어떻게 처리할지 결정합니다.
* `nowrap`: 한 줄에 강제로 배치 (기본값)
* `wrap`: 여러 줄로 줄 바꿈 허용

css
.container {
display: flex;
flex-wrap: wrap; /* 공간이 부족하면 자동으로 다음 줄로 넘김 */
}

간단 활용 예시: 네비게이션 메뉴 만들기**

html
<nav class="main-nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>

css
.main-nav {
display: flex; /* 메뉴 아이템들을 가로로 나란히 */
justify-content: space-around; /* 아이템들 사이에 균등한 공간 */
align-items: center; /* 세로 중앙 정렬 */
background-color: #333;
padding: 10px 0;
}

.main-nav a {
color: white;
text-decoration: none;
padding: 5px 15px;
}

Flexbox는 이 몇 가지 속성만으로도 거의 모든 1차원적인 레이아웃을 손쉽게 만들 수 있습니다. 직접 코드를 작성하며 각 속성값을 바꿔보고, 브라우저에서 어떻게 변화하는지 확인해 보세요! Flexbox에 익숙해지면 퍼블리싱이 훨씬 즐거워질 거예요!