圖解 Flexbox 進階屬性

flex-basis

更改主軸 (main axis) 的預設屬性值,現在主軸是水平的,位於主軸上的屬性是 width。如下範例中,flex-basis 會將紅色、綠色方塊的寬度設為 50px,而藍色方塊的寬度設為 100px。

圖解 Flexbox 進階屬性 - flex-basis

<div class="container">
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
</div>
.container {
  display: flex;
  flex-direction: row;
}

.item {
  flex-basis: 50px;
  width: 50px;
  height: 50px;
  margin: 10px;

  &.red {
    background: red;
  }

  &.blue {
    background: blue;
    flex-basis: 100px;
  }

  &.green {
    background: green;
  }
}

假設使用 flex-direction: column 讓主軸旋轉為直向,使方塊垂直排列呢?位於水平軸 (main axis) 上的屬性就是 height,會被更動到的屬性是方塊的高度。

圖解 Flexbox 進階屬性 - flex-basis

.container {
  display: flex;
  flex-direction: column;
}

flex-grow

每個區塊 (這裡是指小方塊) 可在主軸上佔總容器的多少部份。

例如:每個小方塊預設是佔 1 份,但是藍色小方塊可佔 2 份。

圖解 Flexbox 進階屬性 - flex-grow

.container {
  display: flex;
  flex-direction: row;
}

.item {
  width: 50px;
  height: 50px;
  margin: 10px;
  flex-grow: 1;

  &.red {
    background: red;
  }

  &.blue {
    background: blue;
    flex-grow: 2;
  }

  &.green {
    background: green;
  }
}

若更改主軸方向為直向,則會是這樣:

圖解 Flexbox 進階屬性 - flex-grow

.container {
  display: flex;
  flex-direction: column;
}

.item {
  width: 50px;
  height: 50px;
  margin: 10px;
  flex-grow: 1;

  &.red {
    background: red;
  }

  &.blue {
    background: blue;
    flex-grow: 2;
  }

  &.green {
    background: green;
  }
}

flex-shrink

與 flex-grow 相反,flex-grow 是膨脹,flex-shrink 是縮小。

圖解 Flexbox 進階屬性 - flex-shrink

主軸為為水平方向,在容器寬度縮小的狀態下,設定藍色小方塊的寬度縮小為其他方塊的 1/2 (flex-shrink: 2)。

圖解 Flexbox 進階屬性 - flex-shrink

.container {
  display: flex;
  flex-direction: row;
}

.item {
  width: 50px;
  height: 50px;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;

  &.red {
    background: red;
  }

  &.blue {
    background: blue;
    flex-shrink: 2;
  }

  &.green {
    background: green;
  }
}

flex-wrap

設定小方塊是要強制排成一列或依照容器的包圍而排成多列。

wrap

小方塊依照容器的大小分列排列,在這裡分為 2 列。

圖解 Flexbox 進階屬性 - flex-wrap: wrap

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #fff;
  width: 140px;
  height: 140px;
}

.item {
  width: 50px;
  height: 50px;
  margin: 10px;

  &.red {
    background: red;
  }

  &.blue {
    background: blue;
  }

  &.green {
    background: green;
  }
}

wrap-reverse

概念同 wrap,只是順序相反。

圖解 Flexbox 進階屬性 - flex-wrap: wrap-reverse

.container {
  display: flex;
  flex-wrap: wrap-reverse;
  border: 1px solid #fff;
  width: 140px;
  height: 140px;
}

nowrap

小方塊排成一列不折行,可使用flex-direction調整主軸方向,即小方塊對齊的方向。

圖解 Flexbox 進階屬性 - flex-wrap: nowrap

.container {
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid #fff;
  width: 140px;
  height: 140px;
}

row

主軸為水平向。

圖解 Flexbox 進階屬性 - flex-direction: column

.container {
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid #fff;
  width: 140px;
  height: 140px;
  flex-direction: row;
}

column

主軸為垂直方向。

圖解 Flexbox 進階屬性 - flex-direction: column

.container {
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid #fff;
  width: 140px;
  height: 140px;
  flex-direction: column;
}

flex

以上 flex 屬性的綜合設定,意即:

flex: flex-grow flex-shrink flex-basis;

其中,預設值分別是 flex-grow: 0flex-shrink: 1flex-basis: auto

因此 flex-shrink 的範例 (上) 就可改寫為

.container {
  display: flex;
  flex-direction: row;
}

.item {
  width: 50px;
  height: 50px;
  margin: 10px;
  flex: 1 1 50px;

  &.red {
    background: red;
  }

  &.blue {
    background: blue;
    flex: 1 2 50px;
  }

  &.green {
    background: green;
  }
}

圖解 Flexbox 進階屬性 - flex

相關閱讀:圖解 Flexbox 基本屬性

推薦閱讀 / 參考資料


comments powered by Disqus