![[CSS] 3. Flex 기본](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-07T07%3A23%3A27.351Z-b27696f6-40e2-4a82-94c5-88db1c65c6ee&w=3840&q=75)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
border: 1px solid black;
padding: 20px;
}
.f-box {
display: flex;
justify-content: end;
}
.f-box2 {
display: flex;
flex-direction: column;
/*칼럼은 세로 방향 (칼세)*/
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-box3">
<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>
</body>
</html>
클래스 | justify-content 설정 | 정렬 방식 |
.f-box | end | 오른쪽 끝으로 배치 |
.f-box3 | space-around | 요소들 간 균등 간격 배치 |
.f-box2 | center | 세로로 가운데 배치 |
Share article