flex-basis 속성

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

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

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

구문

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

기본값: auto.

예제

주축이 수평이고, 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;
}

Результат:

같이 보기