CSS 플렉스박스(Flexbox) 레이아웃에서 플렉스 컨테이너 안에 배치되는 자식 요소를 플렉스 아이템(Flex Item)이라고 합니다. 플렉스 아이템의 크기, 순서, 정렬 등을 세밀하게 제어하려면 다음과 같은 속성들을 활용할 수 있습니다.
플렉스 아이템 주요 속성
- order – 플렉스 아이템의 배치 순서를 지정합니다.
- flex-grow – 컨테이너에 남은 공간을 각 아이템이 얼마나 차지할지 비율을 설정합니다.
- flex-shrink – 공간이 부족할 때 아이템이 얼마나 줄어들지 비율을 설정합니다.
- flex-basis – 플렉스 아이템의 기본 크기(길이)를 지정합니다.
- flex – flex-grow, flex-shrink, flex-basis를 한 번에 설정할 수 있는 축약 속성입니다.
- align-self – 개별 아이템의 교차축(cross-axis) 정렬 방식을 지정합니다.
flex-basis 속성 예제
flex-basis 속성을 사용하면 플렉스 아이템의 초기 길이를 설정할 수 있습니다. 아래 예제에서는 네 번째 아이템(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>위 코드를 실행하면 주황색 배경의 플렉스 컨테이너 안에 9개의 아이템이 가로로 배치되며, flex-basis가 적용된 Q4 아이템만 350px의 넓은 너비로 표시되는 것을 확인할 수 있습니다. 이처럼 flex-basis를 활용하면 특정 아이템의 기준 크기를 손쉽게 조절할 수 있습니다.