[CSS] 6. Flex - wrap

Mar 07, 2025


<!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 {
            width: 100px;
            height: 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>

속성	설명
`display: flex;`	자식 요소들이 수평으로 배치됨
`flex-wrap: wrap;`	요소가 한 줄에 다 들어가지 않으면 줄 바꿈

See more posts

[CSS] 6. Flex - wrap

More articles

[CSS] 8. Grid-gap

[CSS] 7. flex 비율 나누기

[CSS] 5. Flexbox 2단 나누기

[CSS] 4. Flexbox로 요소 배치하기