HTML/CSS

[HTML/CSS]6. Flex

손영민's avatar
손영민
Mar 10, 2025
[HTML/CSS]6. Flex
Contents
✅ Flexbox란?🔹 1. Flexbox의 기본 구조🔹 2. Flexbox 컨테이너(부모) 속성🔹 3. Flexbox 아이템(자식) 속성🛠 4. 예제 코드 및 설명
https://www.w3schools.com/css/css3_flexbox.asp

✅ Flexbox란?

Flexbox(플렉스 박스)는 CSS에서 제공하는 레이아웃 모델로, 요소들을 유연하게 배치할 수 있도록 도와줍니다.

📌 주요 특징

✔ 가로 및 세로 방향 정렬이 쉬움 (주축/교차축 개념)
✔ 아이템 간 공간을 자유롭게 조절 가능
✔ 요소 순서를 변경할 수 있음 (HTML 구조를 수정하지 않아도 됨)
✔ 반응형 웹 디자인에 최적화됨

🔹 1. Flexbox의 기본 구조

Flexbox는 부모 컨테이너(Parent)와 자식 아이템(Children) 개념으로 구성됩니다.
css
복사편집
.container {
  display: flex; /* 플렉스 박스 활성화 */
}
  • .container는 부모 요소이며, display: flex를 설정하면 내부 요소들이 자동으로 가로 방향 배치됩니다.
  • 내부 요소(자식 요소들)는 기본적으로 inline-block처럼 배치되지만, Flexbox 속성을 사용하여 정렬을 제어할 수 있습니다.

🔹 2. Flexbox 컨테이너(부모) 속성

속성명
설명
display: flex
Flexbox를 활성화
flex-direction
주축 방향 설정 (row, column, row-reverse, column-reverse)
justify-content
주축(메인 축) 정렬 방식 (flex-start, center, space-between 등)
align-items
교차축(서브 축) 정렬 방식 (flex-start, center, stretch 등)
flex-wrap
아이템 줄바꿈 (nowrap, wrap, wrap-reverse)
align-content
여러 줄일 때 교차축 정렬

🔹 3. Flexbox 아이템(자식) 속성

속성명
설명
flex-grow
남은 공간을 채울 확장 비율
flex-shrink
공간이 부족할 때 축소 비율
flex-basis
기본 크기 설정 (auto, px, % 등)
flex
grow, shrink, basis를 한 번에 설정하는 단축 속성
align-self
개별 아이템의 교차축 정렬 (auto, flex-start, center 등)

🛠 4. 예제 코드 및 설명

📌 예제 1: 수평 정렬 다루기

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

    .f-box3 {
      display: flex;
      justify-content: space-around;
    }

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

    .f-box {
      display: flex;
      justify-content: end;
    }
  </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-box2">
    <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>
</body>
</html>

🔍 설명

  • .f-box3 : justify-content: space-around을 사용하여 요소들 사이에 동일한 여백을 줍니다.
  • .f-box2 : flex-direction: column으로 세로 정렬, justify-content: center로 수직 중앙 정렬.
  • .f-box : justify-content: end를 사용해 오른쪽 정렬.

📌 예제 2: 수직 정렬 다루기

html
복사편집
<!DOCTYPE html>
<html lang="ko">
<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>

🔍 설명

  • .f-box : justify-content: space-between을 사용해 요소들을 양쪽 끝에 배치.
  • align-items: center를 추가해 수직 중앙 정렬.

📌 예제 3: 중첩된 Flexbox 구조

html
복사편집
<!DOCTYPE html>
<html lang="ko">
<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-outer-box : 내부 그룹을 justify-content: space-between으로 양쪽 끝 배치.
  • .f-inner-left-box, .f-inner-right-box : 내부 아이템을 개별 Flexbox로 정렬.

📌 예제 4: 반응형 레이아웃

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

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

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

<body>
  <div class="f-box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</body>
</html>

🔍 설명

  • .f-box : flex-wrap: wrap으로 반응형 레이아웃 구현.
  • 작은 화면에서는 자동으로 다음 줄로 이동.
 
 
추가
<!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>
 
Share article

More articles

See more posts

[HTML/CSS]8. Gridlayout 실습

March 10, 2025
[HTML/CSS]8. Gridlayout 실습

[HTML/CSS]7. Grid-Layout

March 10, 2025
[HTML/CSS]7. Grid-Layout

[HTML/CSS]5. CSS Display

March 10, 2025
[HTML/CSS]5. CSS Display

[HTML/CSS]4.CSS 선택자

March 10, 2025
[HTML/CSS]4.CSS 선택자

sson17

RSS·Powered by Inblog