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

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

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

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

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

css.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가 됩니다:

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

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

Результат: