[Day 15] flex 屬性: flex-basis

12th鐵人賽 css flexbox

placeholder name

2020-09-30 23:53:53

4253 瀏覽

分享至

藉由對彈性項目宣告 flex 縮寫屬性，或是 flex 以下個別的彈性屬性，能夠定義彈性項目在容器中的擴張及壓縮係數。

.item {
    flex: [ <flex-grow> <flex-shrink> || <flex-basis> ] | auto | initial | none
}
預設： 0 1 auto
註：只有 flex-basis 可以是百分比值

英文小幫手：
grow 成長、擴展
shrink 壓縮、縮小
basis 基本、基準
auto 自動的
initial 初始化
none 沒有

| flex 屬性 | 等同於 | 成長係數 | 壓縮係數 | 結果|
| ---- | ---- | ---- | ---- | |
| flex: auto | flex: 1 1 auto|1 |1 |未佈滿容器時項目會成長、超出容器時項目會壓縮|
| flex: inital| flex: 0 1 auto|0 |1 |超出容器時項目會壓縮|
| flex: none | flex: 0 0 auto|0 |0 |什麼都沒有做 |

當彈性項目設定 flex 相關屬性，尺寸就會以 flex 來決定，而不是尺寸相關屬性(height 或 width)。接下來我們會來一一介紹各個 flex 的屬性。

flex-basis

.item {
    flex-basis: auto | [<length>|<percentage>] ;
}
預設: auto

範例

<style>
   .container {
    display: flex;
    width: 360px;
    height: 60px;
    background-color: #a5def5;
  }
  .item{
    margin: 10px;
    width: 150px;
    height: 40px;
    background-color: #00A0E9;
    color: white;
  }
  .item1{
    flex-basis: auto; /*改變屬性值來看看變化*/
  }
  .item2{
    flex-basis: auto; /*改變屬性值來看看變化*/
  }
  .item3{
    flex-basis: auto; /*改變屬性值來看看變化*/
  }
</style>
<body>
  <div class="container">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
  </div>
</body>

flex-basis 或許有人會說就是再使用 flexbox 時取代 width 和 height 的一個值，但只了解這樣可能還不夠。

flex-basis 是能夠"定義彈性成長空間和彈性壓縮空間的初始值/預設值"。一般的方框模型 box model，尺寸可能是來自親代、內容或 box-modol 等相關尺寸屬性（也就是會計算為 width 或 height），不過在 flex 之中可以改變原本尺寸的值。

flex-basis: auto

預設為 auto，其實就是以原本的主軸尺寸 ( width 或 height ) 來當作初始值來做成長及壓縮係數的計算（怎麼計算的可以回顧前兩天的內容），如果 width 和 height 也是 auto，則會計算為內容尺寸，也就是內容的壓縮極限尺寸。

flex-basis: <length>

用 "長度" 單位來當成 flex-basis 的初始值，原本的主軸尺寸初始值會被覆寫，如果拿掉成長和壓縮係數（將 flex-shrink 設為 0），flex-basis 才會真的會成為彈性項目的尺寸。（除此之外還是會受到其他屬性如：min-width, min-height, max-width, max-height 的影響，這幾個屬性需要先被滿足）

flex-basis: <percentage>

用 "百分比" 單位來當成 flex-basis 的初始值，設為 100% 時便等於將尺寸初始值設為彈性容器的寬度，設為 N% 就是將尺寸初始值設為彈性容器的 N%，以此類推。

flex-basis: 0

在使用 flex 縮寫時，如果只有寫前兩個數字( flex-grow 和 flex-shrink )，就等於將 flex-basis 設為 0。設為 0 可能看起來和 auto 的結果有點像，但其實還是有差別的。

flex-basis 設為 0 時，彈性項目的主軸尺寸初始值不是 0 （如果是 0 就沒辦法計算下去了），而是會等於彈性容器的寬度，也就是說如果長度不足彈性容器而設定 flex-grow，則會依照 flex-grow 的比例去直接分配彈性項目的尺寸；如果長度超過彈性容器而設定 flex-shrink，就會依照 flex-shrink 的比值來直接分配。

也就是說如果彈性項目的 flex-grow 依序設為 1、3、1，則寬度就會依這個比例成長塞入彈性容器。

（這篇好像都沒有圖片欸！還在想怎樣的圖片呈現比較好，有空會補 XD）

資料來源：