HTML DOM의 flexBasis 속성은 display: flex;가 적용된 요소 내부에서 플렉스 아이템의 초기 크기(initial size)를 지정하는 데 사용됩니다. 이 속성은 CSS의 flex-basis 속성을 JavaScript로 제어할 수 있게 해주며, 값이 auto가 아닌 경우에는 일반적인 width 속성보다 우선순위가 높습니다.
문법(Syntax)
flexBasis 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.flexBasis = "number|auto|initial|inherit"
속성값 설명
| 값 | 설명 |
|---|---|
| number | 플렉스 아이템의 초기 길이를 백분율(%) 또는 px, em 등 유효한 길이 단위로 지정합니다. |
| auto | 플렉스 아이템의 길이와 동일하게 설정합니다. 길이가 별도로 지정되지 않은 경우 콘텐츠 크기에 따라 결정됩니다. 기본값(default)입니다. |
| initial | 해당 속성을 브라우저의 기본 초기값으로 되돌립니다. |
| inherit | 부모 요소의 속성값을 상속받습니다. |
예제 코드
아래 예제는 버튼을 클릭하면 div 안의 이미지들이 담긴 플렉스 아이템들의 flexBasis 값을 110px에서 200px로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo, #demo2{
background-color: #fff8dc;
margin: 10px;
height: 100px;
box-shadow: 0 0 0 4px brown;
display: flex;
}
#demo div {
flex-basis: 110px;
}
</style>
<script>
function changeFlexBasis() {
for(var i=1;i<3;i++){
document.getElementsByTagName("DIV")[i].style.flexBasis="200px";
}
document.getElementById("Sample").innerHTML="flex basis 값이 200px로 증가했습니다";
}
</script>
</head>
<body>
<h2>데모 제목</h2>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/home_tensor_flow.png"></div>
<div><img src="https://www.tutorialspoint.com/images/home_blockchain_python.png"></div>
<div><img src="https://www.tutorialspoint.com/images/multilanguage-tutorials.png"></div>
</div>
<p>아래 버튼을 클릭하면 div 안의 이미지 플렉스 아이템의 flex basis 속성이 변경됩니다.</p>
<button onclick="changeFlexBasis()">Change Flex Basis</button>
<p id="Sample"></p>
</body>
</html>실행 결과
페이지를 처음 열면 각 이미지가 flex-basis: 110px 설정에 따라 배치된 것을 확인할 수 있습니다.
그런 다음 “Change Flex Basis” 버튼을 클릭하면 JavaScript 함수가 실행되어 해당 플렉스 아이템들의 크기가 200px로 확장됩니다.
정리
flexBasis 속성은 반응형 레이아웃에서 플렉스 아이템의 기준 크기를 동적으로 조절할 때 매우 유용합니다. 특히 auto가 아닌 값을 지정하면 width보다 우선 적용되므로, 플렉스 컨테이너 내부의 아이템 크기를 정밀하게 제어하고 싶다면 flexBasis 활용법을 반드시 익혀두는 것이 좋습니다.