CSS의 flex-basis 속성은 플렉스 컨테이너 안에서 각 플렉스 아이템이 차지할 기본 길이(크기)를 지정하는 속성입니다. 주축(main axis) 방향으로 아이템의 초기 크기를 결정하며, width나 height 속성보다 우선적으로 적용됩니다.
flex-basis 속성의 주요 값
- auto (기본값): 아이템의 width 또는 height 값을 따릅니다.
- px, %, em 등: 고정된 길이 또는 상대적인 비율로 크기를 지정합니다.
- content: 콘텐츠의 실제 크기에 맞춰 자동으로 조절됩니다.
flex-basis 사용 예제
아래 예제에서는 9개의 퀴즈 항목(Q1~Q9)을 플렉스 컨테이너에 배치하고, Q4 항목에만 flex-basis: 350px을 적용하여 다른 항목보다 넓게 표시했습니다. 코드를 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
}
.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>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div style = "flex-basis: 350px">Q4</div>
<div>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
<div>Q9</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 주황색 배경의 플렉스 컨테이너 안에 흰색 박스들이 가로로 나열되며, flex-basis가 적용된 Q4 항목만 350px의 넓은 크기로 표시되는 것을 확인할 수 있습니다. 이처럼 flex-basis를 활용하면 특정 아이템의 기준 크기를 유연하게 제어할 수 있습니다.
참고: flex 축약 속성과의 관계
실무에서는 flex-basis를 단독으로 사용하기보다 flex-grow, flex-shrink, flex-basis를 한 번에 지정하는 flex 축약 속성(예: flex: 1 1 auto;)을 함께 사용하는 경우가 많습니다. 세 속성을 함께 이해하면 반응형 레이아웃을 훨씬 효율적으로 구성할 수 있습니다.