[CSS] 7. flex 비율 나누기

Mar 07, 2025


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


.b1 { flex: 1; } /* 1 비율 */
.b2 { flex: 4; } /* 4 비율 */
.b3 { flex: 1; } /* 1 비율 */
.b4 { flex: 2; } /* 2 비율 */

`flex` 값 비교

속성 값	비율	크기 배분
`flex: 1;`	기본 비율	⬜⬜
`flex: 2;`	2배 크기	⬜⬜⬜⬜
`flex: 4;`	4배 크기	⬜⬜⬜⬜⬜⬜⬜⬜

See more posts

[CSS] 7. flex 비율 나누기

flex 값 비교

More articles

[CSS] 9. Grid-column

[CSS] 8. Grid-gap

[CSS] 6. Flex - wrap

[CSS] 5. Flexbox 2단 나누기

`flex` 값 비교