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屬性設置的寬度。