一、 彈性布局

　　在平時的我們常用的布局類型有以下幾種：

　　1.浮動+定位

　　2.自(zì)适應（百分(fēn)比）

　　3.響應式布局

　　4.彈性布局（Flex布局）

　　以下內(nèi)容是(shì)比較常用的彈性布局，但(dàn)塊标簽與行(xíng)內(nèi)塊标簽是(shì)有區别的。

　　優點：兼容性支持所有浏覽器(Webkit內(nèi)核的浏覽器,要(yào)加上-webkit-)，可(kě)以随用戶的喜好進行(xíng)調節，可(kě)以将任何一個容器指定爲Flex布局。

　　缺點：因爲彈性布局可(kě)調節，所以有巨大(dà)的可(kě)能性，需要(yào)花很(hěn)多(duō)的時間(jiān)進行(xíng)調整；有些彈性設計要(yào)爲IE9以下版本單獨考慮樣式，不(bù)過……IE9以下基本沒多(duō)少人(rén)在用了。

　　注意：當我們使用了彈性布局，那麽在CSS裡(lǐ)的float、clear和vertical-align就(jiù)會(huì)失效。

二、 彈性布局的屬性

　　首先是(shì)作爲彈性布局的容器的屬性。　　

　　1.flex-direction屬性

　　flex-direction決定了容器的方向。

       div { flex-direction: row | row-reverse | column | column-reverse;}

　　四個值分(fēn)别爲：row(默認值)從(cóng)左向右、row-reverse從(cóng)右向左、column從(cóng)上到下、column-reverse從(cóng)下到上。

　　2.flex-wrap屬性

　　默認情況下的布局一般在同一行(xíng)，當設置了flex-wrap屬性之後将自(zì)動将排列不(bù)下的內(nèi)容進行(xíng)換行(xíng)。

      div{flex-wrap: nowrap | wrap | wrap-reverse;}

　　四個值分(fēn)别爲：nowrap(默認值)不(bù)換行(xíng)、wrap向下換行(xíng)、wrap-reverse向上換行(xíng)。

　　3.flex-flow屬性

　　flex-flow屬性是(shì)以上兩種屬性的簡寫形式，默認值是(shì)row nowrap。

      div {flex-flow: <flex-direction> || <flex-wrap>;}

　　4.justify-content屬性

　　justify-content屬性定義了在容器方向上的對齊方式。

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

　　flex-start(默認值)：向左對齊。

　　flex-end：向右對齊。

　　center： 居中對齊。

　　space-between：兩端對齊，每一個子元素等距離(lí)間(jiān)隔，子元素與容器邊框無間(jiān)隔。

　　space-around：每個子元素兩側的間(jiān)隔相(xiàng)等。子元素之間(jiān)的間(jiān)隔比子元素與容器邊框的間(jiān)隔大(dà)一倍。

　　5.align-items屬性

　　align-items屬性定義在垂直容器方向上的對齊方式。

      div {align-items: flex-start | flex-end | center | baseline | stretch;}

　　flex-start：垂直方向的起點對齊。

　　flex-end：垂直方向的終點對齊。

　　center：垂直方向的中點對齊。

　　baseline: 與第一個子元素中文字的基線對齊。

　　stretch(默認值)：如果子元素沒有設置高(gāo)度或者高(gāo)度設爲auto，那麽它将占滿整個容器的高(gāo)度。

　　6.align-content屬性

　　align-content屬性定義了子元素兩種方向上的對齊方式。

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

　　flex-start：當容器方向子元素剛好填滿時，與垂直方向的起點對齊。

　　flex-end：當容器方向子元素剛好填滿時，與垂直方向的終點對齊。

　　center：當容器方向子元素剛好填滿時，與垂直方向的中點對齊。

　　space-between：當容器方向子元素剛好填滿時，垂直方向兩端對齊，子元素之間(jiān)的等距離(lí)間(jiān)隔。

　　space-around：兩個方向兩側的間(jiān)隔都相(xiàng)等。所以，軸線之間(jiān)的間(jiān)隔比軸線與邊框的間(jiān)隔大(dà)一倍。

　　stretch（默認值）：占滿整個垂直方向。

　　下面就(jiù)是(shì)具有彈性布局容器中子元素的屬性

　　1.order屬性

　　order屬性定義了子元素的排列順序，數值小(xiǎo)的在前。

      .son {order: <integer>;}

　　2.flex-grow屬性

　　flex-grow屬性定義了子元素的放大(dà)比例，默認值爲0。

      .son {flex-grow: <number>; /* default 0 */}

　　當給所有子元素設置該屬性爲1，那麽将等分(fēn)所有空間(jiān)，如果單獨給某一個子元素設置n倍，那麽該子元素将占據的空間(jiān)比其他子元素多(duō)n倍。

　　3.flex-shrink屬性

　　flex-shrink屬性定義了子元素的縮小(xiǎo)比例，默認值爲1。

.son {flex-shrink: <number>; /* default 1 */}

　　給所有子元素設置該屬性爲1，當空間(jiān)不(bù)足時那麽所有子元素将等比例縮小(xiǎo)平分(fēn)所有空間(jiān)，如果單獨給某一個子元素設置0，那麽該子元素将在空間(jiān)不(bù)足時不(bù)縮小(xiǎo)。

　　4.flex-basis屬性

　　該屬性定義了給子元素分(fēn)配空間(jiān)時其占據的空間(jiān)爲多(duō)少，可(kě)以設置爲與其width和height屬性一樣的值，那麽它将被分(fēn)配固定的空間(jiān)大(dà)小(xiǎo)。

　　5.flex屬性

　　該屬性爲flex-grow, flex-shrink 和 flex-basis的簡寫。

　　6.align-self屬性

　　該屬性允許設置過的子元素有與其他子元素不(bù)一樣的對齊方式，可(kě)以覆蓋align-items屬性。

      .son {align-self: auto | flex-start | flex-end | center | baseline | stretch}

　　auto：默認值，表示默認繼承父級的align-items屬性。

　　flex-start：垂直方向的起點對齊。

　　flex-end：垂直方向的終點對齊。

　　center：垂直方向的中點對齊。

　　baseline: 與第一個子元素中文字的基線對齊。

　　stretch(默認值)：如果子元素沒有設置高(gāo)度或者高(gāo)度設爲auto，那麽它将占滿整個容器的高(gāo)度。

flex布局（彈性布局）

1. 容器具備的屬性有：

   flex-dirction:(決定主軸的方向)（即項目排列方向） 取值:row/row-reverse/column/column-reverse/ flex-wrap:（如果一條軸線排不(bù)了，如何換行(xíng)） 取值：nowrap（默認）：不(bù)換行(xíng)。 wrap：換行(xíng)，第一行(xíng)在上方。 wrap-reverse：換行(xíng)，第一行(xíng)在下方。 flex-flow :（flex-flow屬性是(shì)flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap） justify-content:(justify-content屬性定義了項目在主軸上的對齊方式。) 取值：flex-start（默認值）：左對齊 flex-end：右對齊 center： 居中 space-between：兩端對齊，項目之間(jiān)的間(jiān)隔都相(xiàng)等。 space-around：每個項目兩側的間(jiān)隔相(xiàng)等。所以，項目之間(jiān)的間(jiān)隔比項目與邊框的間(jiān)隔大(dà)一倍。 align-items (交叉軸上如何對齊) 取值:flex-start/flex-end/center/baseline/stretch align-content(定義了多(duō)根軸線的對齊方式。如果項目隻有一根軸線，該屬性不(bù)起作用) 取值： flex-start：與交叉軸的起點對齊。 flex-end：與交叉軸的終點對齊。 center：與交叉軸的中點對齊。 space-between：與交叉軸兩端對齊，軸線之間(jiān)的間(jiān)隔平均分(fēn)布。 space-around：每根軸線兩側的間(jiān)隔都相(xiàng)等。所以，軸線之間(jiān)的間(jiān)隔比軸線與邊框的間(jiān)隔大(dà)一倍。 stretch（默認值）：軸線占滿整個交叉軸。

2. 項目的屬性： order屬性定義項目的排列順序。數值越小(xiǎo)，排列越靠前，默認爲0 flex-grow屬性定義項目的放大(dà)比例，默認爲0，即如果存在剩餘空間(jiān)，也不(bù)放大(dà) flex-shrink屬性定義了項目的縮小(xiǎo)比例，默認爲1，即如果空間(jiān)不(bù)足，該項目将縮小(xiǎo)。 flex-basis項目占據的主軸空間(jiān)（main size）。浏覽器根據這(zhè)個屬性，計算主軸是(shì)否有多(duō)餘空間(jiān)。它的默認值爲auto，即項目的本來(lái)大(dà) 小(xiǎo)。 flex align-self 允許單個項目有與其他項目不(bù)一樣的對齊方式，可(kě)覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬 性，如果沒有父元素，則等同于stretch。

Flex布局    display:flex    flex屬性