詳解CSS的Flex佈局

本文由雲+社區發表

Flex是Flexible Box 的縮寫，意爲"彈性佈局"，是CSS3的一種佈局模式。經過Flex佈局，能夠很優雅地解決不少CSS佈局的問題。下面會分別介紹容器的6個屬性和項目的6個屬性。每一個屬性會附上效果圖，具體實現代碼會以github路徑形式更新於此。

1.瀏覽器支持狀況

能夠點擊查看各瀏覽器的兼容狀況

2.容器的屬性

注意，設爲 Flex 佈局之後，子元素的float、clear和vertical-align屬性將失效。

容器的屬性有6個，分別是：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

(1)flex-direcion屬性:

做用：控制主軸的方向

flex-direction: row | row-reverse | column | column-reverse;

默認值：row

(2)flex-wrap屬性：

做用：默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

flex-wrap: nowrap | wrap | wrap-reverse;

默認值：nowrap

(3)flex-flow屬性

做用：該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式

默認值：row nowrap

(4)justify-content屬性

做用：定義項目在主軸上的對齊方式

justify-content: flex-start | flex-end | center | space-between | space-around;

默認值：flex-start

(5)align-items屬性

做用：定義項目在交叉軸上如何對齊。

align-items: flex-start | flex-end | center | baseline | stretch

默認值：flex-start

注意：若是align-items爲stretch，想看到每一個flex-item鋪滿整個交叉軸的話，須要設置全部的flex-item的高度：height:auto，不然達不到效果。

(6)align-content屬性

屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

默認值：stretch

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊。

center：與交叉軸的中點對齊。

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

space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。

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

3.項目的屬性

項目的屬性有6個，分別是：

order

flex-grow

flex-shrink

flex-basis

flex

align-self

(1)order屬性：

做用：定義項目的排列順序，數值越小，排列越靠前。

默認值：0

(2)flex-grow屬性

做用：若是存在剩餘空間，項目放大的比例。至關因而各個項目根據這個比例，來分配剩餘空間。

默認值：0（不放大）

(3)flex-shrink屬性

做用：flex-shrink：若是存在空間不足，項目的「縮小比例」。0表示當空間不足時，不縮小。

默認值：1

負值對該屬性無效

(4)flex-basis屬性

做用：定義項目在主軸方向上佔據空間大小的初值。

默認值：auto(項目原本的大小)

(5)flex屬性

做用：是flex-grow、flex-shrink、flex-basis屬性的縮寫形式；

flex: none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

注：幾種常見縮寫形式；

flex: auto; === flex: 1 1 auto;

flex: none; === flex: 0 0 auto;

flex: initial; === flex: 0 1 auto;

flex: <number>; === flex: <number>1 auto;

flex: 1; === flex: 1 1 auto;

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

(6)align-self屬性

做用：屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

默認值：auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

4.小結

本文分別介紹了容器的6個屬性和flex-item項目的6個屬性。建議跟着demo總體作一遍，有助於加深理解。若有問題，歡迎指正。

此文已由做者受權騰訊雲+社區發佈