![[CSS] 5. Flexbox 2단 나누기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-07T07%3A24%3A49.804Z-2b3ada0b-b594-4bb6-b619-b7021934f884&w=3840&q=75)
<!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 | 요소들 사이와 양쪽 여백을 동일하게 배분 |
Share article