寫給自己看的 Flex 佈局

半掩時光發表於2019-04-27
Flex

Flex 是 Flexible Box 的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 佈局，包括行內元素。當設定 display: flex 時，該容器視為塊級元素，如果設定為 display: inline-flex ，則該容器視為行內元素。設定為 Flex 佈局後，子元素的浮動佈局相關屬性將會失效，如：float、clear、vertical-align 等。

/*視為塊級元素*/
.box{
  display: flex
}
/*視為行內元素*/
.inline-box{
  display: inline-flex;
}
複製程式碼

容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

flex

容器的屬性

容器有六個屬性，接下來慢慢的一一道來。

flex-direction

該屬性決定子元素的排列方向，它有四個屬性值：

  • row：預設值，主軸為水平方向，起點在左端
  • row-reverse：主軸為水平方向，起點在右端
  • column：主軸為垂直方向，起點在上沿
  • column-reverse：主軸為垂直方向，起點在下沿

flex-wrap

該屬性決定當一條軸線排列不下所有的子元素，應該如何換行，它有三個屬性值：

  • nowrap: 不換行
  • wrap：換行，第一行在上方
  • wrap-reverse：換行，第一行在下方

flex-flow

該屬性是 flex-direction 和 flex-wrap 兩個屬性的簡寫形式，預設值即為簡寫的兩個屬性的預設值：row nowrap，因此它的屬性值共有 12 種搭配方式。

justify-content

該屬性定義了專案在主軸上的對齊方式，所以，具體的展現形式，與主軸的方向有關係，它有五個屬性值，此處以主軸為預設值，即 flex-direction: row 的形式進行說明 justify-content 的五個屬性值：

  • flex-start： 預設值，左對齊
  • flex-end：右對齊
  • center：居中對齊
  • space-between：兩端對齊，專案之間的間隔都相等
  • space-around：每個專案兩側的間隔相等，所以專案之間的間隔比專案與邊框的間隔大一倍

align-items

該屬性定義專案在交叉軸上如何對齊，所以，具體展現形式，與交叉軸的方向有關，此處以交叉軸從上到下進行說明該屬性的五個屬性值：

  • flex-start：交叉軸的起點對齊
  • flex-end：交叉軸的終點對齊
  • center：交叉軸的中點對齊
  • baseline：專案的第一行文字的基線對齊
  • stretch：預設是，如果專案未設定高度或設為 auto ，將佔滿整個容器的高度

align-content

該屬性定義了多根軸線的對齊方式，如果軸線只有一根軸線，該屬性不起作用，該屬性有六個屬性值：

  • flex-start：與交叉軸的起點對齊
  • flex-end：與交叉軸的終點對齊
  • center：與交叉軸的中點對齊
  • space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈
  • space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
  • stretch：預設值，軸線佔滿整個交叉軸

專案的屬性

專案可以設定的屬性共有六個。

order

該屬性定義專案的排列順序，數值越小，則排列越靠前，預設為 0 ，可以設定為負值。

.item {
  order: <integer>;/* default 0 */
}
複製程式碼

flex-grow

該屬性定義專案的放大比例，預設為 0 ，即如果存在剩餘空間，也不放大。如果所有專案的 flex-grow 屬性都為 1，則它們將等分剩餘空間（如果有的話）；如果一個專案的 flex-grow 屬性為 2，其他專案都為 1，則前者佔據的剩餘空間將比其他項多一倍。

.item {
  flex-grow: <integer>; /* default 0 */
}
複製程式碼

flex-shrink

該屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小；如果所有專案的 flex-shrink 屬性都為 1，當空間不足時，都將等比例縮小；如果一個專案的 flex-shrink `性為 0，其他專案都為 1，則空間不足時，前者不縮小；負值對該屬性無效。

.item {
  flex-shrink: <number>; /* default 1 */
}
複製程式碼

flex-basic

該屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）；瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為 auto，即專案的本來大小；它可以設為跟 width 或 height 屬性一樣的值（比如350px），則專案將佔據固定空間。

.item {
  flex-basis: <length> | auto; /* default auto */
}
複製程式碼

flex

該屬性是 flex-grow, flex-shrink 和 flex-basis 的簡寫，預設值為 0 1 auto ；後兩個屬性可選；該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)；建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
複製程式碼

【注：】鄙人經常這樣寫：

.item{
  flex: 1;
}

複製程式碼

此時即為給該專案設定了 flex-grow: 1， 效果即為該專案獨自瓜分了所有的剩餘空間，這對於容器內只有兩個專案，其中一個為固定寬度，另一個寬度為不確定的情況特別適合。

align-self

該屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性；預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch；該屬性可能取6個值，除了 auto，其他都與 align-items 屬性完全一致。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
複製程式碼

相關文章