flex-basis 与 width

说明

• flex-basis属性默认值：auto

默认值表示：项目的flex-basis属性值为项目的width属性值。

• width属性默认值： auto

默认值表示：项目的width属性值为项目中内容的实际宽度。

• 项目的实际宽度通过 项目的flex-basis属性值 与 项目中内容的实际宽度 比较后获得。

flex项目的实际宽度

项目的width属性为auto

• 项目中内容的实际宽度 > 项目的flex-basis属性值
• 满足以上条件，项目的实际宽度： 项目的width属性值

<div class="row">

  <div class="col"></div>


  <div class="col">
    <div style="width: 250px;"></div>
  </div>

</div>

.row {
  display: flex;
  width: 800px;
  height: 100px;
}

.row > .col:nth-child(1) {
  background: red;
  width: 100px;
  flex-basis: auto;
}


.row > .col:nth-child(2) {
  background-color: green;
  width: auto;
  flex-basis: 100px;
}

• 项目中内容的实际宽度：250px
• 项目的flex-basis属性值：100px
• 项目的实际宽度：250px

• 项目中内容的实际宽度 < 项目的flex-basis属性值
• 满足以上条件，项目的实际宽度： 项目的flex-basis属性值

<div class="row">

  <div class="col"></div>


  <div class="col">
    <div style="width: 50px;"></div>
  </div>

</div>

.row {
  display: flex;
  width: 800px;
  height: 100px;
}

.row > .col:nth-child(1) {
  background: red;
  width: 100px;
  flex-basis: auto;
}


.row > .col:nth-child(2) {
  background-color: green;
  width: auto;
  flex-basis: 100px;
}

• 项目中内容的实际宽度：50px
• 项目的flex-basis属性值：100px
• 项目的实际宽度：100px

项目的width属性不为auto

项目不设置overflow: hidden

• 项目中内容的实际宽度 > 项目的flex-basis属性值
• 项目的width属性值 > 项目的flex-basis属性值
• 满足以上两个条件，项目的实际宽度： 项目的width属性值

<div class="row">

  <div class="col"></div>
  
  
  <div class="col">
    <div style="width: 250px;"></div>
  </div>

</div>

.row {
  display: flex;
  width: 800px;
  height: 100px;
}

.row > .col:nth-child(1) {
  background: red;
  width: 100px;
  flex-basis: auto;
}


.row > .col:nth-child(2) {
  background-color: green;
  width: 200px;
  flex-basis: 100px;
}

• 项目中内容的实际宽度：250px
• 项目的flex-basis属性值：100px
• 项目的width属性值：200px
• 项目的实际宽度：200px

• 项目中内容的实际宽度 > 项目的flex-basis属性值
• 项目的width属性值 < 项目的flex-basis属性值
• 满足以上两个条件，项目的实际宽度: 项目的flex-basis属性值

<div class="row">

  <div class="col"></div>
  
  
  <div class="col">
    <div style="width: 250px;"></div>
  </div>

</div>

.row {
  display: flex;
  width: 800px;
  height: 100px;
}

.row > .col:nth-child(1) {
  background: red;
  width: 100px;
  flex-basis: auto;
}


.row > .col:nth-child(2) {
  background-color: green;
  width: 50px;
  flex-basis: 100px;
}

• 项目中内容的实际宽度：250px
• 项目的flex-basis属性值：100px
• 项目的width属性值：50px
• 项目的实际宽度：100px

• 项目中内容的实际宽度 < 项目的flex-basis属性值
• (项目的width属性值 > 项目的flex-basis属性值) 或者 (项目的width属性值 < 项目的flex-basis属性值)
• 满足以上两个条件，项目的实际宽度: 项目的flex-basis属性值

<div class="row">

  <div class="col"></div>
  
  
  
  <div class="col">
    <div style="width: 50px;"></div>
  </div>
  <div class="col">
    <div style="width: 50px;"></div>
  </div>

</div>

.row {
  display: flex;
  width: 800px;
  height: 100px;
}

.row > .col:nth-child(1) {
  background: red;
  width: 100px;
  flex-basis: auto;
}


.row > .col:nth-child(2) {
  background-color: green;
  width: 200px;
  flex-basis: 100px;
}
.row > .col:nth-child(3) {
  background-color: blue;
  width: 50px;
  flex-basis: 100px;
}

情况一：

• 项目中内容的实际宽度：50px
• 项目的flex-basis属性值：100px
• 项目的width属性值：200px
• 项目的实际宽度：100px

情况二：

• 项目中内容的实际宽度：50px
• 项目的flex-basis属性值：100px
• 项目的width属性值：50px
• 项目的实际宽度：100px

项目设置overflow: hidden

• 无论任何情况，项目的实际宽度都为flex-basis属性设置的宽度。