CSS flex-grow 속성이란?
flex-grow 속성은 플렉스 컨테이너 안에 남은 여유 공간을 각 플렉스 아이템이 얼마나 차지할지 비율로 지정하는 CSS 속성입니다. 이 속성을 사용하면 특정 플렉스 아이템의 크기를 다른 아이템보다 더 크게 확장할 수 있으며, 하나 또는 그 이상의 플렉스 아이템에 자유롭게 적용할 수 있습니다.
flex-grow의 기본값은 0이며, 값에는 단위를 붙이지 않습니다. 예를 들어 어떤 아이템에 flex-grow: 2를 지정하고 다른 아이템에 flex-grow: 1을 지정하면, 남은 공간은 2:1의 비율로 나뉘어 배분됩니다.
flex-grow 사용 예제
아래 코드를 실행하면 flex-grow 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 이 예제에서는 세 번째 아이템(Q3)에 flex-grow: 20을 지정했기 때문에, 나머지 아이템들(flex-grow: 1)보다 훨씬 넓게 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
align-content: space-between;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div style = "flex-grow: 1">Q1</div>
<div style = "flex-grow: 1">Q2</div>
<div style = "flex-grow: 20">Q3</div>
<div style = "flex-grow: 1">Q4</div>
<div style = "flex-grow: 1">Q5</div>
</div>
</body>
</html>예제 코드 설명
- .mycontainer: display: flex를 적용해 자식 요소들이 플렉스 레이아웃으로 배치되도록 설정했습니다.
- 자식 div 요소들: 흰색 배경과 고정 폭(100px)을 가지며, 각각 margin: 5px로 여백이 주어집니다.
- Q3 아이템: flex-grow: 20이 적용되어, 컨테이너의 남은 공간을 다른 아이템 대비 20배 많이 차지합니다.
flex-grow 활용 팁
모든 아이템에 동일한 flex-grow 값을 지정하면 남은 공간이 균등하게 분배됩니다. 반대로 특정 영역(예: 사이드바와 본문 콘텐츠)의 비율을 다르게 하고 싶다면, 각 아이템에 서로 다른 flex-grow 값을 부여해 화면 비율을 손쉽게 제어할 수 있습니다. 반응형 웹 디자인에서 유동적인 레이아웃을 만들 때 매우 유용하게 활용됩니다.