flex-basis

HTML

<h1>flex-basis</h1>
<p>chrome 经测试，只支持 auto 和 具体值(300px)，其他属性都不支持</p>
<div class="container">
  <div class="item">auto</div>
  <div class="item">300px</div>
  <div class="item">fill~</div>
  <div class="item">max-content</div>
  <div class="item">min-content</div>
  <div class="item">fit-content</div>
  <div class="item">content</div>
</div>

SCSS

.container {
  display: flex;
  backgruond: #FFF;
}

.item {
  background: #F47B69;
  padding: 14px;
  margin: 10px 2px;
  &:nth-child(1) {
    flex-basis: auto;
  }
  &:nth-child(2) {
    flex-basis: 300px;
  }
  &:nth-child(3) {
    flex-basis: fill;
  }
  &:nth-child(4) {
    flex-basis: max-content;
  }
  &:nth-child(5) {
    flex-basis: mix-content;
  }
  &:nth-child(6) {
    flex-basis: fit-content;
  }
  &:nth-child(7) {
    flex-basis: content;
  }
}