JavaScript에서 flexGrow 속성을 사용하면 플렉스(flex) 컨테이너 안에서 특정 항목이 나머지 항목들에 비해 얼마나 확장될지를 지정할 수 있습니다. 이 속성은 남은 여유 공간을 각 항목에 어떤 비율로 분배할지 결정하므로, 반응형 레이아웃을 만들 때 매우 유용합니다.
flexGrow 속성의 기본 개념
flexGrow의 기본값은 0이며, 이 경우 항목은 여유 공간을 차지하지 않습니다. 값을 1로 설정하면 해당 항목이 남은 공간을 다른 항목과 균등하게 나누어 가지며, 값이 클수록 더 많은 공간을 할당받습니다.
예제
아래 코드를 실행하면 flexGrow 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 버튼을 클릭하면 세 번째 DIV의 flexGrow 값이 2로 변경되어, 나머지 항목보다 두 배 많은 여유 공간을 차지하게 됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 250px;
height: 150px;
display: flex;
flex-flow: row wrap;
}
#box div {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 20px;
}
</style>
</head>
<body>
<div id = "box">
<div style = "background-color:orange;">DIV1</div>
<div style = "background-color:blue;">DIV2</div>
<div style = "background-color:yellow;" id="myID">DIV3</div>
</div>
<p>flexGrow 속성 사용하기</p>
<button onclick = "display()">설정</button>
<script>
function display() {
document.getElementById("myID").style.flexGrow = "2";
}
</script>
</body>
</html>코드 설명
위 예제의 핵심 부분을 살펴보면 다음과 같습니다.
- #box 스타일:
display: flex;를 통해 컨테이너를 플렉스 박스로 지정하고,flex-flow: row wrap;으로 항목이 가로 방향으로 배치되며 공간이 부족할 때 줄바꿈되도록 설정했습니다. - #box div 스타일: 모든 자식 항목의 초기
flex-grow값은 0,flex-shrink는 1,flex-basis는 20px입니다. - display() 함수: 버튼을 클릭하면
document.getElementById("myID").style.flexGrow = "2";가 실행되어 세 번째 항목(DIV3)의 확장 비율이 2로 변경됩니다.
결과적으로 DIV3는 DIV1, DIV2보다 두 배 넓게 확장되어 표시됩니다. 이처럼 flexGrow 속성을 활용하면 화면 크기에 따라 콘텐츠 영역의 비율을 동적으로 조절할 수 있습니다.