JavaScript에서 플렉스(flex) 항목의 초기 길이를 설정하려면 flexBasis 속성을 사용합니다. 이 속성은 CSS의 flex-basis에 대응하며, 플렉스 컨테이너 안에서 각 항목이 차지할 기본 크기를 지정합니다.
픽셀(px), 퍼센트(%), auto 등 다양한 단위로 값을 지정할 수 있으며, 버튼 클릭과 같은 사용자 이벤트에 따라 동적으로 항목의 크기를 변경할 때 특히 유용합니다.
예제 코드
아래 예제는 세 개의 DIV 요소가 담긴 플렉스 박스를 만들고, 버튼을 클릭하면 세 번째 항목(DIV3)의 초기 길이를 100px로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 450px;
height: 150px;
display: flex;
}
#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>flexBasis 속성 사용하기</p>
<button onclick = "display()">설정</button>
<script>
function display() {
document.getElementById("myID").style.flexBasis = "100px";
}
</script>
</body>
</html>코드 설명
위 코드의 핵심 부분은 다음 한 줄입니다.
document.getElementById("myID").style.flexBasis = "100px";동작 방식:
- #box 스타일:
display: flex;를 적용해 자식 요소들이 플렉스 레이아웃으로 배치됩니다. - 초기 상태: 모든 하위 DIV는
flex-basis: 20px;로 시작 너비가 지정되어 있습니다. - 버튼 클릭 시:
display()함수가 실행되어 ID가myID인 DIV3의flexBasis값이 20px에서 100px로 즉시 변경됩니다.
이처럼 flexBasis 속성을 활용하면 JavaScript만으로도 플렉스 항목의 기본 크기를 자유롭게 제어할 수 있습니다.