[HTML/CSS] 6. CSS Flexbox

문정준

Mar 07, 2025

Contents

1. Flexbox란?2. Flexbox를 이용하여 박스 정렬하기 3. Flexbox 추가 속성

✏️

Flexbox

내부 박스들을 Inline 속성으로 변화 시키는 속성

1. Flexbox란?

내부 박스들을 Inline 속성으로 변화 시키는 속성

Flexbox들을 통해 내부 박스들의 정렬 등을 쉽게 수행할 수 있음

display : flex 선언으로 설정 가능

정렬은 내부 박스들의 축에 따라 방향이 달라짐

flex-direction : 축 방향 설정 (column, row)

Column = Vertical ( 컬럼은 세로 )

justify-content : 현재 축 방향의 정렬 설정

start : 축의 시작 부분에 정렬
end : 축의 끝 부분에 정렬
center : 박스 내부의 여백을 반으로 나누어, 양쪽 끝에 분배
space-around : 박스의 시작과 끝에 여백을 주고, 나머지 여백을 균일하게 나누어 분배
space-between : 내부 박스들 사이에만 여백을 균일하게 나누어 분배
space-evenly : 내부 박스들의 전, 후 공간에 여백을 균일하게 나누어 분배

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: 100px;
            align-items: flex-start;
        }

        .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-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>
    <div class="f-box3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

</html>

2. Flexbox를 이용하여 박스 정렬하기

Flexbox를 여러 개 사용하여 박스를 구분하면, 정렬을 유동적으로 사용할 수 있음

레이아웃 설계에 유리

3과 4 사이에만 공백을 주어 박스 정렬하기

1,2,3끼리 박스에 묶어 flexbox를 만들고, 4,5끼리 묶어 flexbox를 만듦

1, 2, 3 : f-inner-left-box
4, 5 : f-inner-right-box

두 개의 flexbox를 다시 flexbox에 묶음

f-outer-box

f-outer-box에 space-between 정렬 부여

그 개체가 아닌, 부모 개체에 정렬을 부여해야 함


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>

3. Flexbox 추가 속성

✏️

특정 박스 내의 div에만 속성을 거는 방법

f-box div {} : f-box 내의 모든 div에 속성 부여

f-box>div {} : f-box 바로 아래의 div에 속성 부여

f-box 내의 div들은 영향을 받지만, 그 div 안의 div는 영향을 받지 않음

flex-wrap : 박스 내의 개체들의 너비를 비율에 맞추어 조절 여부 결정

unwrap : defalut - 비율에 맞추어 조절
wrap : 정해진 크기에 맞추어 박스 크기 고정, 둘 자리가 없으면 아래쪽으로 내려옴


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</body>

</html>

Contents

1. Flexbox란?2. Flexbox를 이용하여 박스 정렬하기 3. Flexbox 추가 속성

<!DOCTYPE html> <html lang="en"> <head> <style> div { border: 1px solid black; padding: 10px; } .f-box { display: flex; justify-content: space-between; height: 100px; align-items: flex-start; } .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-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> <div class="f-box3"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <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>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <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> </body> </html>