iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 27
0

文章將陸續整理並更新至個人部落格


上一篇文章 中說明了 flex 屬性是 flex-grow、flex-shrink、flex-basis 三個屬性的三合一,而 flex 屬性值除了直接給定三種值之外,還有幾種寫法。


flex 屬性

flex: flex-grow | flex-shrink | flex-basis

flex 屬性除了直接給定 flex-growflex-shrinkflex-basis 三個值之外,還有以下幾種寫法。

  • flex: initial
  • flex: auto
  • flex: none
  • flex: <正數>

註:<正數> 可不必為整數,例如可為 0.5。

以下分別說明這四種屬性值的意義。


flex: initial

等同於 flex: 0 1 auto

flex item 會依照 width 或 height (視主軸 main axis 而定)屬性決定其尺寸,即使 container 中有剩餘空間,flex item 仍無法延伸,但當空間不足時,元素可收縮


flex: auto

等同於 flex: 1 1 auto

flex item 可延伸收縮,會依照 width 或 height (視主軸 main axis 而定)屬性決定其尺寸。若所有 flex items 均設定 flex: auto 或 flex: none,則在 flex items 尺寸決定後,剩餘空間會被平分給 flex: auto 的 flex items。


flex: none

等同於 flex: 0 0 auto

flex item 不可延伸收縮,會依照 width 或 height (視主軸 main axis 而定)屬性決定其尺寸。


flex: <positive-number>

等同於 flex: <正數> 1 0

flex item 可延伸收縮,flex-basis 為 0,故 flex item 會依據所設定的比例佔用 container 中的剩餘空間。

例如

flex: 2;

等同於

flex: 2 1 0;

可利用此種屬性值的指定方式,輕易地決定 flex itemsflex container 中所佔的尺寸比例 (width 或 height,視主軸 main axis 而定)。

例如,一個 flex container 裡面有三個 flex items,希望不管 container 如何變化,這三個 items 的尺寸皆一樣大,則可設定每個 items 的 flex 屬性有相同的正數(positive-number)。

<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>
.container {
  display: flex;
  height: 120px;
}

.item1 {
  flex: 1;   /* 將得到容器中剩餘空間的 1/(1+1+1)=1/3 等份 */
}

.item2 {
  flex: 1;   /* 將得到容器中剩餘空間的 1/(1+1+1)=1/3 等份 */
}

.item3 {
  flex: 1;   /* 將得到容器中剩餘空間的 1/(1+1+1)=1/3 等份 */
}

註:只要是相同正數即可,其僅代表比例關係。

且不論容器如何變動(例如縮放視窗時),比例皆為 1 : 1 : 1


同理,若希望這三個 flex items 的尺寸比例分別為 3 : 2 : 1,則可設定:

.item1 {
  flex: 3;   /* 將得到容器中剩餘空間的 3/(3+2+1)=3/6 等份 */
}

.item2 {
  flex: 2;   /* 將得到容器中剩餘空間的 2/(3+2+1)=2/6 等份 */
}

.item3 {
  flex: 1;   /* 將得到容器中剩餘空間的 1/(3+2+1)=1/6 等份 */
}

且不論容器如何變動(例如縮放視窗時),比例皆為 3 : 2 : 1




flex 屬性介紹到這囉,接下來將介紹 flex 的對齊方式~
明天見囉



持續看 flex 規範中,或許之後會再重新整理一次文章~


參考資料

W3C-CSS Flexible Box Layout Module Level 1
MDN-Controlling Ratios of Flex Items Along the Main Axis


上一篇
flex 4
下一篇
flex 6
系列文
前端新手進化史30

尚未有邦友留言

立即登入留言