Flex彈性佈局（附超Q小demo）

doublemeng發表於2019-04-20
Flex

簡介

Flex 是 Flexible Box 的縮寫，意為彈性佈局，任何一個容器都可以指定為Flex佈局，包括行內元素，如下：

div{
  display: flex;
}
複製程式碼
span{
  display: inline-flex;
}
複製程式碼

注意：

  1. 戳此檢視相容性；

  2. Webkit核心的瀏覽器，要加上-webkit-字首；

  3. 設為Flex佈局以後，子元素的float、clear、vertical-align將會失效；

  4. 設為Flex佈局的容器，都會預設存在兩個軸，水平的主軸(main axis)和垂直的交叉軸(cross axis)。

一覽無餘

Flex主要分為6個容器屬性和6個專案屬性，見下圖：

Flex

下面將詳細介紹以上屬性。

容器的屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content
複製程式碼

1.flex-direction

作用：主軸的方向，即專案的排列順序

取值：row | row-reverse | column | column-reverse

預設：row

示例：

flex-direction

2.flex-wrap

作用：專案在一條軸線排不下時的換行方式

取值：nowrap | wrap | wrap-reverse

預設： nowrap

示例：

flex-wrap

3.flex-flow

作用：flex-direction和flex-wrap的簡寫

取值：<flex-direction> || <flex-wrap>

預設：row nowrap

4.justify-content

作用：專案在主軸上的對齊方式

取值：flex-start | flex-end | center | space-between | space-around

space-between: 兩端對齊，專案之間的間隔都相等；

space-around: 每個專案兩側的間隔相等。

預設： flex-start

示例：

justify-content

5.align-items

作用：專案在交叉軸上的對齊方式

取值：flex-start | flex-end | center | baseline | stretch

baseline: 專案的第一行文字的基線對齊；

stretch: 如果專案未設定高度或設為auto，將佔滿整個容器的高度。

預設：stretch

示例：

align-items

6.align-content

作用：多跟軸線的對齊方式，如果專案只有一根軸線，該屬性不起作用

取值：flex-start | flex-end | center | space-between | space-around | stretch

space-between: 與交叉軸兩端對齊，軸線之間的間隔平均分佈；

space-around: 每根軸線兩側的間隔都相等；

stretch: 軸線佔滿整個交叉軸。

預設：stretch

示例：

align-content

專案的屬性

order

flex-grow

flex-shrink

flex-basis

flex

align-self
複製程式碼

1.order

作用：專案的排列順序，數值越小越靠前

取值：<integer>

預設：0

示例：

以item1為例,注意觀察item1的變化。

order

2.flex-grow

作用：定義專案的放大比例

取值：<number>

如果所有專案該值都為1，則代表等分。

預設：0 (如果存在剩餘空間也不放大)

示例：

以item1為例,注意觀察item1的變化。

flex-grow

3.flex-shrink

作用：專案的縮小比例，即如果空間不足，該專案將縮小

取值：<number>

負值無效；

如果所有專案該值都為1，則代表空間不足時，等比例縮小；

如果一個專案該值為0，其餘都為1，則代表當空間不足時，該專案不縮小。

預設：1

示例：

以item1為例,注意觀察item1的變化。

flex-shrink

4.flex-basis

作用：專案佔據的主軸空間

取值：<number>

預設：auto(專案本身的大小)

示例：

以item1為例,注意觀察item1的變化。

flex-basis

5.flex

作用：flex-grow、flex-shrink 和 flex-basis的簡寫

取值：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex-shrink、flex-basis為可選屬性；

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

預設：0 1 auto

常見簡寫：

auto === 1 1 auto

none === 0 0 auto

initial === 0 1 auto

<number> === <number> 1 auto

1 === 1 1 auto
複製程式碼

6.align-self

作用：單個專案與其他專案不同的對齊方式，可覆蓋align-items

取值：auto | flex-start | flex-end | center | baseline | stretch

預設：auto(表示繼承父元素的align-items,如果沒有父元素，則等同於stretch)

示例：

以item1為例,注意觀察item1的變化。

align-self

參考

Flex 佈局教程：語法篇

小結

本文主要介紹了flex基礎佈局的6個容器屬性與專案屬性，並附有超Q示例。順帶推薦FlexBox Froggy給大家練習（也就是本文示例?的大?）。

感謝閱讀，如有問題，歡迎指正。

相關文章