CSS Flexbox에서 항목 고정 너비란?
CSS Flexbox 레이아웃에서는 기본적으로 플렉스 항목(flex item)들이 컨테이너의 남은 공간을 나누어 가지며 유동적으로 크기가 조절됩니다. 하지만 때로는 특정 항목의 크기를 고정하고, 나머지 항목만 자동으로 늘어나거나 줄어들도록 만들고 싶은 경우가 있습니다. 이럴 때 flex 속성과 width 속성을 적절히 조합하면 원하는 레이아웃을 쉽게 구현할 수 있습니다.
문법(Syntax)
CSS flex 속성의 기본 문법은 다음과 같습니다.
Selector {
flex: /*value*/
}flex 속성은 flex-grow(공간이 남을 때 팽창 비율), flex-shrink(공간이 부족할 때 수축 비율), flex-basis(항목의 기본 크기) 세 가지 값을 한 번에 지정할 수 있는 축약형(shorthand) 속성입니다. 예를 들어 flex: 0 0 66px;처럼 작성하면 해당 항목은 팽창하지도, 수축하지도 않으며 항상 66px의 고정 너비를 유지하게 됩니다.
예제 1: flex 값 비교
다음 예제는 서로 다른 flex 값을 가진 항목들이 플렉스 컨테이너 안에서 어떻게 배치되는지 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
padding: 4%;
}
.d1 {
background: hotpink;
flex: 0 20 20px;
}
.d2 {
background: greenyellow;
flex: 1;
}
.d3 {
background: tomato;
flex: 1;
}
</style>
</head>
<body>
<div class="demo">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
여기서 .d1 항목은 flex: 0 20 20px;로 설정되어 있어 grow 비율이 0이므로 늘어나지 않고, shrink 비율이 20으로 매우 높아 공간이 부족할 때 우선적으로 줄어듭니다. 반면 .d2와 .d3는 flex: 1;로 동일한 비율로 남은 공간을 균등하게 나누어 가집니다.
예제 2: 고정 너비 항목과 자동 크기 조절 항목 혼합
다음 예제는 고정 너비(66px)를 가진 항목과 flex: auto;로 설정해 화면 크기에 따라 자동으로 크기가 변하는 항목을 함께 배치한 모습입니다.
<!DOCTYPE html>
<html>
<style>
div {
display: flex;
border-radius: 2%;
background-color: linen;
height: 50px;
}
#d1 {
border: 5px solid orangered;
padding: 2%;
flex: auto;
}
#d2 {
border: 5px groove greenyellow;
width: 66px;
}
#d3 {
padding: 5%;
border: 5px ridge hotpink;
}
#d4 {
height: 100px;
border: 5px solid magenta;
}
</style>
<body>
<div>
<div id="d1">Auto Resize</div>
<div id="d2">66px fixed width</div>
<div id="d3"></div>
</div>
<div id="d4">Last Div</div>
</body>
</html>위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
#d2 항목에는 width: 66px;가 직접 지정되어 있어 컨테이너 크기가 변하더라도 항상 66px의 고정 너비를 유지합니다. 반면 #d1은 flex: auto; 덕분에 콘텐츠 크기를 기준으로 하면서도 남은 공간을 유연하게 차지합니다.
정리
Flexbox에서 항목의 너비를 고정하려면 다음 두 가지 방법을 활용할 수 있습니다.
- width 속성 사용: 항목에 고정 픽셀 값을 지정하고, 필요하다면 flex: none; 또는 flex: 0 0 auto;를 함께 적용해 팽창·수축을 방지합니다.
- flex-basis 활용: flex: 0 0 200px;처럼 세 번째 값으로 기본 크기를 고정하면 별도의 width 지정 없이도 일관된 크기를 유지할 수 있습니다.
이러한 기법을 응용하면 사이드바는 고정하고 본문 영역만 반응형으로 늘어나는 레이아웃 등 다양한 UI 구조를 손쉽게 만들 수 있습니다.