![[CSS] 7. flex 비율 나누기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-07T08%3A50%3A06.124Z-b3843bab-ce25-4fd5-9963-ef7e1cfdaa3d&w=3840&q=75)
<!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배 크기 | ⬜⬜⬜⬜⬜⬜⬜⬜ |
Share article