CSS Flexbox로 유연한 레이아웃 만들기

CSS Flexbox는 웹디자인에서 유연하고 직관적인 1차원 레이아웃을 구현하기 위한 강력한 도구입니다. Flexbox를 사용하면 행(row) 또는 열(column)을 기준으로 요소를 배치하고, 정렬과 간격을 효율적으로 관리할 수 있습니다. 이번 글에서는 CSS Flexbox의 기초부터 활용 예제까지 살펴보겠습니다.

1. Flexbox란?

Flexbox(Flexible Box Layout)는 **컨테이너(부모 요소)**와 플렉스 아이템(자식 요소) 간의 관계를 기반으로 작동합니다. Flexbox의 핵심은 레이아웃을 쉽게 조정하고 요소 간의 간격과 정렬을 동적으로 변경할 수 있다는 점입니다.

 

 

2. Flexbox의 기본 문법

 

1) Flex 컨테이너

Flexbox를 활성화하려면 부모 요소에 display: flex를 설정해야 합니다.

.container {
  display: flex;
}

 

 

2) 주요 축(axes)

Flexbox는 두 가지 축을 중심으로 동작합니다:

- 메인 축(Main Axis): 요소가 배치되는 기본 방향(가로 또는 세로).
- 교차 축(Cross Axis): 메인 축에 수직인 방향.

 

 

 

3. Flexbox 속성 소개

1) 부모 컨테이너 속성

속성	설명
flex-direction	요소 배치 방향 설정(가로/세로).
justify-content	메인 축 기준 요소 정렬.
align-items	교차 축 기준 요소 정렬.
flex-wrap	요소의 줄 바꿈 설정.
gap	요소 간 간격 설정.

 

 

예제: 부모 컨테이너 설정

.container {
  display: flex;
  flex-direction: row; /* 기본값: 가로 배치 */
  justify-content: center; /* 가로 방향 중앙 정렬 */
  align-items: center; /* 세로 방향 중앙 정렬 */
  gap: 20px; /* 요소 간 20px 간격 */
}

 

2) 자식 아이템 속성

속성	설명
flex	아이템의 크기 비율 설정.
order	요소의 배치 순서 변경.
align-self	개별 요소의 교차 축 정렬 설정.

 

 

예제: 자식 아이템 설정

.item {
  flex: 1; /* 아이템의 크기 비율을 1로 설정 */
  align-self: flex-end; /* 세로 방향 하단 정렬 */
}

 

 

 

 

4. Flexbox 활용 예제

1) 간단한 네비게이션 바

HTML

<nav class="navbar">
  <div class="logo">로고</div>
  <ul class="menu">
    <li>홈</li>
    <li>서비스</li>
    <li>문의</li>
  </ul>
</nav>

 

CSS

.navbar {
  display: flex;
  justify-content: space-between; /* 좌우로 요소 배치 */
  align-items: center; /* 세로 방향 정렬 */
  padding: 10px 20px;
  background-color: #333;
  color: white;
}

.menu {
  display: flex;
  gap: 15px; /* 메뉴 아이템 간 간격 */
  list-style: none;
}

 

 

2) 로그인 페이지 레이아웃

HTML

<div class="login-container">
  <form class="login-form">
    <h2>로그인</h2>
    <input type="text" placeholder="아이디">
    <input type="password" placeholder="비밀번호">
    <button type="submit">로그인</button>
  </form>
</div>

 

CSS

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 화면 전체 높이 */
  background-color: #f4f4f4;
}

.login-form {
  display: flex;
  flex-direction: column; /* 세로 방향 정렬 */
  gap: 15px; /* 입력 필드 간 간격 */
  padding: 20px;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

 

 

 

 

 

5. Flexbox의 장점

(1) 유연한 정렬: 요소를 쉽게 정렬하고 간격을 조정할 수 있습니다.
(2) 적은 코드로 복잡한 레이아웃 구현: CSS 속성 몇 개만으로 다양한 레이아웃 구성 가능.
(3) 반응형 디자인 지원: 화면 크기에 따라 유연하게 크기와 배치 조정.

 

6. Flexbox의 한계

Flexbox는 1차원 레이아웃(행 또는 열)에 최적화되어 있습니다. 복잡한 2차원 레이아웃(행과 열을 동시에 조정)이 필요한 경우, CSS Grid를 사용하는 것이 더 적합합니다.

 

 

 

 

CSS Flexbox는 간단한 레이아웃부터 복잡한 UI 구성까지 다양한 디자인 요구를 충족할 수 있는 강력한 도구입니다. Flexbox의 핵심 속성을 잘 이해하고 활용하면, 웹디자인 작업을 더 빠르고 효율적으로 수행할 수 있습니다. 이제 Flexbox를 활용해 유연한 레이아웃을 직접 만들어 보세요!