[HTML/CSS] 4. Flex

김건우

Mar 07, 2025

Contents

예제 1. 박스들을 가로, 세로, 일정한 간격으로 정렬 예제2. Flexbox 정렬 예제3. Flex 그룹 정렬 예제4. 박스 자동 줄바꿈 예제 5. 비율 설정하는 방법

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

💡

하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성

부모박스와 자식박스 둘다 있어야 개념이 성립됨

1차원적인 개념. 가로축/세로축

예제 1. 박스들을 가로, 세로, 일정한 간격으로 정렬


<!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>

예제2. Flexbox 정렬

justify-content, align-items 값을 변경하면서 레이아웃이 어떻게 바뀌는지


<!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>

예제3. Flex 그룹 정렬

두 개의 그룹이 각각 요소들을 가로 정렬하면서 전체적으로 양 끝으로 배치


<!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>

예제4. 박스 자동 줄바꿈

flex-wrap → 공간이 부족하면 자동으로 줄 바꿈

.f-box > div (자식 요소들)

부모 요소의 크기에 따라 박스들이 자동으로 여러 줄로 정렬 됨


<!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>

예제 5. 비율 설정하는 방법


<!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>