Flexbox 활용 가이드

1. Flexbox란?

Flexbox(Flexible Box Layout)는 CSS3에서 도입된 레이아웃 모델로, 부모 요소(컨테이너)와 자식 요소(아이템) 간의 관계를 유연하게 조정할 수 있도록 설계되었습니다. 특히, 1차원 레이아웃(가로 또는 세로)을 다룰 때 매우 유용하며, 복잡한 정렬 작업을 간단하게 만들어줍니다.

Flexbox를 사용하려면 부모 요소에 display: flex;를 적용해야 합니다. 그러면 해당 부모 요소는 Flex 컨테이너가 되고, 그 안의 자식 요소들은 Flex 아이템이 됩니다.

2. Flexbox의 주요 속성

Flexbox를 이해하려면 몇 가지 주요 속성을 알아야 합니다. 아래는 부모 요소(컨테이너)와 자식 요소(아이템)에 적용할 수 있는 주요 속성들입니다.

부모 요소(컨테이너)에 적용되는 속성

display: flex;: Flexbox를 활성화합니다.
flex-direction: Flex 아이템의 배치 방향을 설정합니다.
- row: 가로 방향 (기본값)
- column: 세로 방향
- row-reverse, column-reverse: 방향을 반대로 설정
justify-content: 주축(main axis)을 기준으로 아이템을 정렬합니다.
- flex-start: 시작점 정렬
- flex-end: 끝점 정렬
- center: 중앙 정렬
- space-between: 아이템 사이에 균등한 간격 (양 끝은 여백 없음)
- space-around: 아이템 주위에 균등한 간격
- space-evenly: 모든 간격을 완전히 균등하게
align-items: 교차축(cross axis)을 기준으로 아이템을 정렬합니다.
- flex-start: 교차축 시작점 정렬
- flex-end: 교차축 끝점 정렬
- center: 교차축 중앙 정렬
- stretch: 아이템을 교차축 방향으로 늘림 (기본값)
- baseline: 아이템의 텍스트 기준선 정렬
flex-wrap: 아이템이 한 줄에 다 들어가지 않을 경우 줄 바꿈 여부를 설정합니다.
- nowrap: 줄 바꿈 없음 (기본값)
- wrap: 줄 바꿈 허용
- wrap-reverse: 줄 바꿈 허용 + 순서 반대

자식 요소(아이템)에 적용되는 속성

flex-grow: 아이템이 남은 공간을 얼마나 차지할지 설정 (기본값: 0)
flex-shrink: 아이템이 줄어들 수 있는 비율 설정 (기본값: 1)
flex-basis: 아이템의 기본 크기 설정 (기본값: auto)
flex: flex-grow, flex-shrink, flex-basis를 한 번에 설정하는 단축 속성
align-self: 특정 아이템의 교차축 정렬을 개별적으로 설정 (부모의 align-items를 덮어씀)
order: 아이템의 배치 순서를 설정 (기본값: 0)

이제 이 속성들을 활용해 가로와 세로 정렬을 구현하는 방법을 알아보겠습니다.

3. 가로 정렬 (flex-direction: row)

가로 정렬은 Flexbox의 기본 방향인 flex-direction: row를 사용합니다. 이 경우 주축은 가로축이 되고, 교차축은 세로축이 됩니다.

예제 1: 가로 중앙 정렬

부모 요소의 중앙에 자식 요소들을 가로로 정렬하려면 justify-content: center;를 사용합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 가로 정렬</title>
  <style>
    .container {
      display: flex;
      flex-direction: row; /* 기본값이므로 생략 가능 */
      justify-content: center; /* 가로 중앙 정렬 */
      align-items: center; /* 세로 중앙 정렬 */
      height: 200px; /* 컨테이너 높이 설정 */
      background-color: #f0f0f0;
    }
    .item {
      width: 50px;
      height: 50px;
      background-color: #3498db;
      margin: 10px;
      color: white;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

결과: 세 개의 자식 요소가 가로로 중앙에 정렬되고, 세로로도 중앙에 위치합니다.

4. 세로 정렬 (flex-direction: column)

세로 정렬은 flex-direction: column을 사용합니다. 이 경우 주축은 세로축이 되고, 교차축은 가로축이 됩니다.

예제 1: 세로 중앙 정렬

부모 요소의 중앙에 자식 요소들을 세로로 정렬하려면 justify-content: center;와 align-items: center;를 사용합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 세로 정렬</title>
  <style>
    .container {
      display: flex;
      flex-direction: column; /* 세로 방향 */
      justify-content: center; /* 세로 중앙 정렬 */
      align-items: center; /* 가로 중앙 정렬 */
      height: 400px; /* 컨테이너 높이 설정 */
      background-color: #f0f0f0;
    }
    .item {
      width: 50px;
      height: 50px;
      background-color: #e74c3c;
      margin: 10px;
      color: white;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

결과: 세 개의 자식 요소가 세로로 중앙에 정렬되고, 가로로도 중앙에 위치합니다.

5. Flexbox를 사용할 때 주의할 점

브라우저 호환성: Flexbox는 대부분의 현대 브라우저에서 잘 지원되지만, 아주 오래된 브라우저(예: IE9 이하)에서는 동작하지 않을 수 있습니다. 프로젝트의 타겟 브라우저를 확인하세요.
컨테이너 크기 설정: Flexbox는 부모 요소의 크기에 의존하므로, width와 height를 명시적으로 설정하는 것이 좋습니다.
줄 바꿈 활용: 자식 요소가 많아 한 줄에 다 들어가지 않을 경우 flex-wrap: wrap;을 사용해 자연스럽게 줄 바꿈을 구현할 수 있습니다.
디버깅 도구 사용: 브라우저 개발자 도구에서 Flexbox 관련 속성을 시각적으로 확인할 수 있는 기능을 활용하면 디버깅이 훨씬 쉬워집니다.

6. 정리

Flexbox는 display: flex;를 부모 요소에 적용하여 자식 요소들을 유연하게 정렬할 수 있습니다.

가로 정렬: justify-content
세로 정렬: align-items
개별 정렬: align-self
방향 변경: flex-direction
여러 줄 정렬: flex-wrap
여러 줄 간격 조절: align-content

이 속성들을 적절히 조합하면 원하는 레이아웃을 쉽게 만들 수 있습니다.

꼬맹이