CSS의 flex-basis 속성을 사용하면 플렉스 컨테이너 안에서 각 플렉스 항목(flex item)이 차지하는 초기 길이를 지정할 수 있습니다. 이 속성은 주축(main axis) 방향을 기준으로 적용되며, 가로 방향 레이아웃에서는 너비(width), 세로 방향 레이아웃에서는 높이(height)에 해당하는 값이 됩니다.
flex-basis 속성이란?
flex-basis는 플렉스 항목에 남은 공간이 분배되기 전의 기본 크기를 결정합니다. 기본값은 auto이며, 이 경우 항목의 width 또는 height 속성값(지정하지 않았다면 콘텐츠 크기)이 초기 크기로 사용됩니다. px, %, em 등 다양한 단위로 값을 지정할 수 있습니다.
예제 코드
아래 예제에서는 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>실행 결과 설명
위 코드를 실행하면 주황색 배경의 플렉스 컨테이너 안에 흰색 항목들이 가로로 배치됩니다. 일반 항목들은 width가 100px로 지정되어 있지만, Q4 항목은 flex-basis 값이 350px로 설정되어 나머지 항목들보다 훨씬 넓게 렌더링되는 것을 확인할 수 있습니다.
참고 사항
flex-basis는 flex 축약 속성(shorthand)의 세 번째 값으로도 지정할 수 있습니다. 예를 들어 flex: 1 1 350px;처럼 작성하면 grow, shrink, basis 값을 한 번에 설정할 수 있어 실무에서 자주 활용됩니다.