[CSS] 5. Flexbox 2단 나누기

Mar 07, 2025


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

구분	설명
정렬 방식	`justify-content: space-between;` 사용하여 양쪽 정렬
왼쪽 박스	`1, 2, 3` → 가로 정렬 (`display: flex;`)
오른쪽 박스	`4, 5` → 가로 정렬 (`display: flex;`)

속성 값	설명
`flex-start`	왼쪽 정렬 (기본값)
`flex-end`	오른쪽 정렬
`center`	중앙 정렬
`space-between`	양쪽 끝 정렬 (첫 요소는 왼쪽 끝, 마지막 요소는 오른쪽 끝)
`space-around`	요소들 사이의 간격을 균등하게 배분 (양쪽 여백 포함)
`space-evenly`	요소들 사이와 양쪽 여백을 동일하게 배분

See more posts

[CSS] 5. Flexbox 2단 나누기

More articles

[CSS] 7. flex 비율 나누기

[CSS] 6. Flex - wrap

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

[CSS] 3. Flex 기본