[HTML/CSS] 6. Flex

김미숙

Mar 10, 2025

Contents

기본 개념 1. 플렉스 컨테이너 속성 (부모 요소에 적용)2. 플렉스 아이템 속성 (자식 요소에 적용)3. 플렉스 박스의 핵심 개념

https://www.w3schools.com/css/css3_flexbox.asp

‼️

요소들을 정렬하고, 배치하며, 공간을 효율적으로 분배하는 CSS 레이아웃 모델

Flexbox는 다양한 화면 크기와 콘텐츠에 맞춰 반응형 레이아웃을 만들 때 유용

기본 개념

플렉스 컨테이너 (Flex Container): 플렉스 항목들을 포함하는 부모 요소입니다. 이 요소는 display: flex;로 정의합니다.

플렉스 아이템 (Flex Items): 플렉스 컨테이너 내부의 자식 요소들입니다. 이 요소들은 플렉스 컨테이너 내에서 배치되고 정렬됩니다.

1. 플렉스 컨테이너 속성 (부모 요소에 적용)

속성	설명
`display: flex;`	요소를 플렉스 컨테이너로 지정
`flex-direction`	주 축(main axis) 방향 설정 (`row`, `row-reverse`, `column`, `column-reverse`)
`flex-wrap`	아이템 줄바꿈 설정 (`nowrap`, `wrap`, `wrap-reverse`)
`flex-flow`	`flex-direction`과 `flex-wrap`의 단축 속성 (`row wrap`)
`justify-content`	주 축 방향의 정렬 (`flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`)
`align-items`	교차 축(cross axis) 방향 정렬 (`flex-start`, `center`, `flex-end`, `stretch`, `baseline`)
`align-content`	여러 줄 아이템 정렬 (`flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `stretch`)

2. 플렉스 아이템 속성 (자식 요소에 적용)

속성	설명
`flex-grow`	아이템이 차지할 비율 (`0` = 기본값, `1` = 동일 분배, `2` 이상 = 비율 지정)
`flex-shrink`	화면이 줄어들 때 축소 비율 (`1` = 기본값, `0` = 축소 없음)
`flex-basis`	기본 크기 설정 (`auto`, `100px`, `20%` 등)
`flex`	`flex-grow flex-shrink flex-basis` 단축 속성 (`flex: 1 1 auto;`)
`order`	아이템 순서 지정 (기본값 `0`, 작은 값이 먼저 배치됨)
`align-self`	개별 아이템 정렬 (`auto`, `flex-start`, `center`, `flex-end`, `stretch`, `baseline`)

3. 플렉스 박스의 핵심 개념

주 축(Main Axis)과 교차 축(Cross Axis)

flex-direction: row; → 가로가 주 축, 세로가 교차 축
flex-direction: column; → 세로가 주 축, 가로가 교차 축

공간 분배

justify-content → 주 축 정렬
align-items → 교차 축 정렬
align-content → 여러 줄 정렬

자동 크기 조절

flex: 1; → 컨테이너의 가용 공간을 균등 분배
flex: 1 0 auto; → 크기 자동 조절 (늘어나지만 줄어들지는 않음)

‼️

justify-content

Flexbox 또는 Grid 레이아웃에서 가로(주 축) 정렬을 조절
수평 정렬을 조절하는 핵심 속성
📌 주요 값 정리

값	설명	예제
`flex-start`	왼쪽 정렬 (기본값)	🔵🔵🔵
`flex-end`	오른쪽 정렬	⬜⬜🔵🔵🔵
`center`	중앙 정렬	⬜🔵🔵🔵⬜
`space-between`	양 끝 정렬 (간격 동일)	🔵⬜🔵⬜🔵
`space-around`	요소 양쪽에 여백 추가	⬜🔵⬜🔵⬜🔵⬜
`space-evenly`	모든 요소 사이에 같은 간격	🔵⬜🔵⬜🔵

flex-direction

Flexbox 레이아웃에서 아이템들의 배치 방향을 설정
아이템들을 가로 또는 세로로 배치할지 결정
📌 주요 값 정리

값	설명	예시
`row` (기본값)	가로 방향 (왼쪽 → 오른쪽)	🔵🔵🔵
`row-reverse`	가로 방향 (오른쪽 → 왼쪽)	🔵🔵🔵 (뒤집힘)
`column`	세로 방향 (위 → 아래)	🔵 🔵 🔵
`column-reverse`	세로 방향 (아래 → 위)	🔵 🔵 🔵 (뒤집힘)


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .f-box {
        display: flex;
        justify-content: end;
      }

      .f-box2 {
        display: flex;
        flex-direction: column;
        height: 500px;
        justify-content: center;
      }

      .f-box3 {
        display: flex;
        justify-content: space-around;
      }
    </style>
  </head>
  <body>
    <div class="f-box3">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>

    <div class="f-box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>

    <div class="f-box2">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

‼️

align-items

Flexbox 또는 Grid 레이아웃에서 아이템들의 세로(교차 축) 정렬을 설정
아이템들이 세로 방향으로 어떻게 정렬될지 결정
📌 주요 값 정리

값	설명	예시
`stretch` (기본값)	아이템이 세로로 늘어남 (부모 컨테이너 크기 맞추기)	🔵🔵🔵
`flex-start`	세로 상단 정렬	🔵⬜⬜
`flex-end`	세로 하단 정렬	⬜⬜🔵
`center`	세로 중앙 정렬	⬜🔵⬜
`baseline`	텍스트의 기준선에 맞춰 정렬	🔵⬜🔵


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .f-box {
        display: flex;
        justify-content: space-between;
        height: 500px;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="f-box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .f-outer-box {
        display: flex;
        justify-content: space-between;
      }

      .f-inner-left-box {
        display: flex;
      }

      .f-inner-right-box {
        display: flex;
      }
    </style>
  </head>
  <body>
    <div class="f-outer-box">
      <div class="f-inner-left-box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      <div class="f-inner-right-box">
        <div>4</div>
        <div>5</div>
      </div>
    </div>
  </body>
</html>

‼️

.f-box div{} 와 .f-box > div{} 의 차이점

.f-box div{}

후손 선택자 (descendant selector)
.f-box 안에 있는 모든 div를 선택.
div가 .f-box의 자식, 자식의 자식 등 어디에 있든 상관없이 모두 선택.

.f-box > div{}

자식 선택자 (child selector)
.f-box의 직접 자식인 div만 선택
.f-box의 자식이 아닌 하위 요소의 자식 div는 선택되지 않음

📌 요약

선택자	설명	선택되는 요소
`.f-box div`	후손 선택자	`.f-box` 내의 모든 `div`
`.f-box > div`	자식 선택자	`.f-box`의 직접 자식 `div`만

flex-wrap

Flexbox 레이아웃에서 아이템들이 컨테이너를 넘어설 때 어떻게 처리할지 결정
아이템들이 한 줄에 모두 들어가지 않으면 어떻게 나누어 배치할지를 설정할 수 있음
📌 주요 값 정리

값	설명	예시
`nowrap` (기본값)	아이템이 한 줄에 다 배치됨 (넘치면 화면 밖으로 나감)	🔵🔵🔵🔵🔵
`wrap`	아이템이 넘치면 다음 줄로 배치됨	🔵🔵🔵🔵🔵
`wrap-reverse`	아이템이 넘치면 반대로 다음 줄에 배치됨 (반대 방향)	🔵🔵🔵🔵🔵


<!DOCTYPE html>
<html lang="ko">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .f-box {
        display: flex;
        flex-wrap: wrap;
      }

      .f-box div {
      }

      .f-box > div {
        height: 100px;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div class="f-box">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
  </body>
</html>

비율 설정


<!DOCTYPE html>
<html lang="ko">

<head>
<style>
div {
border: 1px solid black;
padding: 10px;
}

    .f-box {
        display: flex;
        flex-wrap: wrap;
    }

    .b1 {
        flex: 1;
    }

    .b2 {
        flex: 4;
    }

    .b3 {
        flex: 1;
    }

    .b4 {
        flex: 2;
    }
</style>


</head>

<body>

<div class="f-box">
    <div class="b1">1</div>
    <div class="b2">1</div>
    <div class="b3">1</div>
    <div class="b4">1</div>
</div>


</body>

</html>