플렉스 컨테이너 안에서 특정 항목의 길이를 나머지 항목에 상대적으로 설정하려면 CSS의 flex 속성을 활용할 수 있습니다. JavaScript에서는 이 속성을 동적으로 제어할 수 있어, 버튼 클릭과 같은 사용자 이벤트에 따라 레이아웃을 유연하게 변경할 수 있습니다.
flex 속성이란?
flex 속성은 플렉스 컨테이너(display: flex가 적용된 요소) 내부의 자식 항목들이 남은 공간을 어떻게 분배할지 결정합니다. 예를 들어 모든 항목에 flex: 1을 적용하면 각 항목이 동일한 비율로 공간을 나누어 가집니다.
JavaScript로 flex 속성 구현하기
아래 예제 코드는 버튼을 클릭하면 세 개의 DIV 요소에 flex 속성을 적용하여 화면 너비를 균등하게 분배하는 방법을 보여줍니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 300px;
height: 400px;
display: flex;
}
</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;">DIV3</div>
</div>
<button onclick = "display()">Set</button>
<script>
function display() {
var a = document.getElementById("box");
var b = a.getElementsByTagName("DIV");
var j ;
for (j = 0; j < b.length; j++) {
b[j].style.flex = "1";
}
}
</script>
</body>
</html>코드 설명
위 코드의 동작 방식을 단계별로 살펴보면 다음과 같습니다.
1. 플렉스 컨테이너 생성: #box 요소에 display: flex를 적용하여 자식 요소들을 플렉스 항목으로 만듭니다.
2. 버튼 이벤트 연결: 'Set' 버튼을 클릭하면 display() 함수가 호출됩니다.
3. 항목 선택: getElementById()로 컨테이너를 가져온 후, getElementsByTagName("DIV")를 사용해 내부의 모든 DIV 요소를 선택합니다.
4. flex 값 적용: 반복문을 통해 각 항목의 style.flex 값을 "1"로 설정합니다. 그 결과 세 개의 DIV가 컨테이너 너비를 1:1:1 비율로 균등하게 나누어 차지하게 됩니다.
flex 값 조절하기
flex 속성의 값에 따라 항목별 비율을 자유롭게 조정할 수 있습니다. 예를 들어 첫 번째 항목만 flex: 2로 설정하고 나머지를 flex: 1로 설정하면, 첫 번째 항목이 나머지 항목보다 두 배 더 넓은 공간을 차지합니다. 이러한 특성을 활용하면 사이드바와 본문 영역처럼 서로 다른 비율의 레이아웃도 손쉽게 구현할 수 있습니다.