flex-basis

flex-basis CSS 속성은 flex item이 렌더링 될 때 엘리먼트의 기본 크기를 결정합니다. 만약 box-sizing 속성을 수정하지 않는다면, 기본값인 content-box 속성을 기반하여 엘리먼트의 크기를 결정합니다.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

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

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

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

Values

<'width'>

독립적인<length>값 (부모 엘리먼트에 의존하지 않는 단위 px, pt, cm, ..),  , 또는 flex container의 크기를 기반으로 한 <percentage> 값을 사용할 수 있으며. 초기값인 auto 를 설정할 수도 있습니다. 하지만 음수값은 사용할 수 없습니다.

content

flex-item 내부 컨텐츠 크기에 따라 자동으로 설정되는 값을 제어하기 위해 사용합니다.

Note: content 값은 Flexible Box Layout 처음 배포때 포함되지 않았기 때문에, 일부 하위브라우저를 지원하지 않을 수 있습니다. 

Note: The equivalent effect can be had by using auto together with a main size (width or height) of auto.

History:

• Originally, flex-basis:auto meant "look at my width or height property".
• Then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or height property" keyword. It was implemented in bug 1032922.
• Then, that change was reverted in bug 1093316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword).

Formal syntax

content | <'width'>

Example

HTML

<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>

CSS

.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6AB6D8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2E86BB;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.flex:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 18px;
}

.flex1 {
  flex-basis: auto;
}

.flex1:after {
  content: 'auto';
}

.flex2 {
  flex-basis: max-content;
}

.flex2:after {
  content: 'max-content';
}

.flex3 {
  flex-basis: min-content;
}

.flex3:after {
  content: 'min-content';
}

.flex4 {
  flex-basis: fit-content;
}

.flex4:after {
  content: 'fit-content';
}

.flex5 {
   flex-basis: content;
}

.flex5:after {
  content: 'content';
}

.flex6 {
  flex-basis: fill;
}

.flex6:after {
  content: 'fill';
}

Results

Specifications

Browser compatibility

See also

• CSS Flexbox Guide: Basic Concepts of Flexbox
• CSS Flexbox Guide: Controlling Ratios of flex items along the main axis
• width