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

1.浮動+定位

2.自適應(yīng)（百分比）

3.響應(yīng)式布局

4.彈性布局（Flex布局）

今天所要整理的就是比較常用的彈性布局，但塊標(biāo)簽與行內(nèi)塊標(biāo)簽是有區(qū)別的。

{:;input{}

當(dāng)然不是所有的東西都能像錢一樣讓所有人都喜歡，它也有自己的優(yōu)缺點。

優(yōu)點：兼容性支持所有瀏覽器(Webkit內(nèi)核的瀏覽器,要加上-webkit-)，可以隨用戶的喜好進行調(diào)節(jié)，可以將任何一個容器指定為Flex布局。

缺點：因為彈性布局可調(diào)節(jié)，所以有巨大的可能性，需要花很多的時間進行調(diào)整；有些彈性設(shè)計要為IE6單獨設(shè)計樣式，不過……IE6還有多少人在用(⊙﹏⊙)b。

注意：當(dāng)我們使用了彈性布局，那么在CSS里的float、clear和vertical-align就會失效。

二、 彈性布局的屬性

首先是作為彈性布局的容器的屬性。

1.flex-direction屬性

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

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

四個值分別為：row(默認值)從左向右、row-reverse從右向左、column從上到下、column-reverse從下到上。

2.flex-wrap屬性

默認情況下的布局一般在同一行，當(dāng)設(shè)置了flex-wrap屬性之后將自動將排列不下的內(nèi)容進行換行。

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

四個值分別為：nowrap(默認值)不換行、wrap向下?lián)Q行、wrap-reverse向上換行。

3.flex-flow屬性

flex-flow屬性是以上兩種屬性的簡寫形式，默認值是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：兩端對齊，每一個子元素等距離間隔，子元素與容器邊框無間隔。

space-around：每個子元素兩側(cè)的間隔相等。子元素之間的間隔比子元素與容器邊框的間隔大一倍。

5.align-items屬性

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

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

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

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

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

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

stretch(默認值)：如果子元素沒有設(shè)置高度或者高度設(shè)為auto，那么它將占滿整個容器的高度。

6.align-content屬性

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

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

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

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

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

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

space-around：兩個方向兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

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

下面就是具有彈性布局容器中子元素的屬性

1.order屬性

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

.son { order: integer }

2.flex-grow屬性

flex-grow屬性定義了子元素的放大比例，默認值為0。

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

當(dāng)給所有子元素設(shè)置該屬性為1，那么將等分所有空間，如果單獨給某一個子元素設(shè)置n倍，那么該子元素將占據(jù)的空間比其他子元素多n倍。

3.flex-shrink屬性

flex-shrink屬性定義了子元素的縮小比例，默認值為1。

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

給所有子元素設(shè)置該屬性為1，當(dāng)空間不足時那么所有子元素將等比例縮小平分所有空間，如果單獨給某一個子元素設(shè)置0，那么該子元素將在空間不足時不縮小。

4.flex-basis屬性

該屬性定義了給子元素分配空間時其占據(jù)的空間為多少，可以設(shè)置為與其width和height屬性一樣的值，那么它將被分配固定的空間大小。

5.flex屬性

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

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。