CSS에서 플렉스 항목(Flex Item)의 크기를 제어하려면 flex 속성을 사용합니다. flex 속성은 flex-grow(팽창 비율), flex-shrink(수축 비율), flex-basis(기본 크기) 세 가지 값을 한 번에 지정할 수 있는 단축 속성입니다.
flex 속성의 세 가지 구성 요소
- flex-grow: 컨테이너에 남은 공간이 있을 때 해당 항목이 다른 항목에 비해 얼마나 더 넓어질지 결정합니다.
- flex-shrink: 공간이 부족할 때 항목이 얼마나 줄어들 수 있는지를 결정합니다.
- flex-basis: 항목의 초기 크기를 지정합니다.
auto로 설정하면 콘텐츠 크기를 기준으로 삼습니다.
예제 코드
다음은 flex 속성을 활용해 플렉스 항목의 크기를 제어하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
width: 100%;
}
div {
width: 200px;
height: 200px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
flex: 2 1 auto;
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Controlling flex items dimesions</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
코드 설명
.first 클래스에 적용된 flex: 2 1 auto는 다음과 같은 의미를 갖습니다.
- 2 → flex-grow 값이 2이므로, 남은 공간을 기본값(1)인 다른 항목보다 두 배 많이 차지합니다.
- 1 → flex-shrink 값이 1이므로, 공간이 부족할 때 다른 항목과 같은 비율로 줄어듭니다.
- auto → flex-basis가 auto이므로, 항목의 기본 크기는 콘텐츠나 width 속성에 따라 결정됩니다.
실행 결과
위 코드를 실행하면 아래와 같은 화면이 출력됩니다. 첫 번째 div는 flex-grow 값이 2로 설정되어 있어, 빨간색과 보라색 영역보다 약 두 배 넓게 표시되는 것을 확인할 수 있습니다.
