메인 축을 따른 플렉스 요소의 크기

width 및 height 속성은 축 방향에 관계없이 플렉스 요소의 너비와 높이를 설정합니다. 즉, 축이 수평이면, width는 너비를 설정하지만, 축이 수직이더라도 width는 여전히 너비를 설정합니다. 때로는 이러한 동작이 불편할 수 있습니다.

플렉스 모델에는 메인 축을 따른 요소의 크기를 설정하는 특별한 속성 flex-basis가 있습니다. 이는 메인 축이 수평이면 이 속성이 요소들의 너비를 설정하고, 수직이면 높이를 설정한다는 의미입니다. 이 속성은 부모가 아닌 플렉스 요소들 자체에 설정해야 합니다. 예제를 통해 살펴보겠습니다.

현재 메인 축이 수평이고, 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;
}

5개의 플렉스 블록을 만드세요. 메인 축을 따라 100px의 너비를 설정하세요. 다양한 축을 따라 블록의 동작을 확인해 보세요.

축이 수평이고 블록에 flex-basis 속성과 동시에 width 속성이 설정된 경우, flex-basis가 우선순위를 가집니다. 이를 확인해 보세요.

축이 수직이고 블록에 flex-basis 속성과 동시에 height 속성이 설정된 경우, flex-basis가 우선순위를 가집니다. 이를 확인해 보세요.