flex-basis 속성

flex-basis 속성은 다른 flex 속성을 적용하기 전에 특정 flex 블록의 크기를 설정합니다. 일반적으로, 이 속성은 주축을 따라 요소의 크기를 설정합니다. 즉, 주축이 수평이면 이 속성은 요소의 너비를 설정하고, 수직이면 높이를 설정합니다.

특정 flex 블록에 적용됩니다.

이 속성은 단축 속성인 flex의 일부분입니다.

구문

선택자 {
	flex-basis: CSS 단위 (및 백분율) | auto;
}

기본값: auto.

예제

주축이 수평이고, flex-basis 값이 50px인 경우를 가정해 봅시다. 이 경우 요소의 너비는 50px가 됩니다:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent	{
	display: flex;
	flex-direction: row; /* 축이 수평 */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* 요소 크기 */
	border: 1px solid green;
}

예제

이제 flex-basis 속성 값을 변경하지 않고 축을 뒤집어 봅시다. 이 경우 요소의 높이가 50px가 됩니다:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* 축이 수직 */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

같이 보기

flex 블록의 축 방향을 설정하는 속성 flex-direction
주축을 따라 정렬을 설정하는 속성 justify-content
교차축을 따라 정렬을 설정하는 속성 align-items
flex 블록의 다중 행을 설정하는 속성 flex-wrap
flex-direction과 flex-wrap을 위한 단축 속성 flex-flow
flex 블록의 순서를 설정하는 속성 order
단일 블록의 정렬을 설정하는 속성 align-self
flex 블록의 늘어남 비율을 설정하는 속성 flex-grow
flex 블록의 줄어듦 비율을 설정하는 속성 flex-shrink
flex-grow, flex-shrink 및 flex-basis를 위한 단축 속성 flex