flex-basis

Baseline

Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 9월.

See full compatibility
Learn more

flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.

시도해 보기

flex-basis: auto;

flex-basis: 0;

flex-basis: 200px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Item One</div>
  <div>Item Two</div>
  <div>Item Three</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

참고 : auto 값을 가지지 않은 flex-basis와 width(flex-direction: column인 경우 height) 값을 동시에 적용한 경우 flex-basis가 우선합니다.

구문

css

/* <'width'> 지정 */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 원본 크기 키워드 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 플렉스 아이템 내용 크기에 따라 조절 */
flex-basis: content;

/* 전역 값 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

flex-basis 속성값은 content 키워드를 사용하거나, <'width'>를 나타내는 단위를 사용합니다.

값

<'width'>

<length>, 플렉스 컨테이너의 크기에 상대적인 <percentage>, auto 키워드 중 하나. 음수 값은 유효하지 않습니다.

content

플렉스 아이템의 콘텐츠 크기에 따라 자동으로 크기가 변합니다.

참고 : content 키워드는 Flexible Box Layout의 첫 배포에 포함되지 않아, 일부 오래 된 구현체에서는 지원하지 않을 수 있습니다. flex-basis와 주 크기(width, height) 속성을 동시에 auto로 설정하면 동일한 효과를 볼 수 있습니다.

역사: 원래 flex-basis: auto의 뜻은 자신의 width 또는 height 속성의 값을 사용하라는 것이었습니다.

그 후 flex-basis: auto는 자동 크기조절로 바뀌고, 기존의 auto는 main-size로 바뀌었습니다. bug 1032922에서 구현 기록을 볼 수 있습니다.bug 1093316에서 되돌려져 auto 가 다시 width / height 속성을 가리키게 됐고, 대신 새로운 content 키워드가 자동 크기조절을 맡게 됐습니다. (Firefox bug 1105111에서 볼 수 있습니다)

형식 구문

flex-basis = 
  content    |
  <'width'>  

<width> = 
  auto             |
  <box-size>       |
  <anchor-size()>  

<box-size> = 
  <length-percentage [0,∞]>                 |
  stretch                                   |
  contain                                   |
  min-content                               |
  max-content                               |
  fit-content                               |
  fit-content(