布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)；2009年，W3C提出了一種新的方案—-Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。

彈性盒子是 CSS3 的一種新的布局模式，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>

引入彈性盒布局模型的目的是提供一種更加有效的方式來對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。:

CSS3 彈性盒子內(nèi)容

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。

彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素。

1：最基本的

image.png

/*body {

? ? ? ? direction: rtl;/*設(shè)置 direction 屬性為 rtl (right-to-left),

? ? ? ? ? ? ? 彈性子元素的排列方式也會(huì)改變 ，整體從右到左

? ? }*/.flex-container{display: flex;display: -webkit-flex;width:450px;height:150px;background-color: darkcyan;? ? }.flex-item{width:130px;height:125px;margin:10px;background-color: yellowgreen;? ? }盒子1盒子2盒子3

2：flex-direction使用（彈性子元素在父容器中的位置）

image.png

/*flex-direction的值有:

? ? ? ? row：橫向從左到右排列（左對(duì)齊），默認(rèn)的排列方式。

? ? ? ? row-reverse：反轉(zhuǎn)橫向排列（右對(duì)齊，從后往前排，最后一項(xiàng)排在最前面。

? ? ? ? column：縱向排列。

? ? ? ? column-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項(xiàng)排在最上面。

? ? */.flex-container{display: flex;display: -webkit-flex;width:450px;background-color: darkcyan;flex-direction: row-reverse;? ? }.flex-item{width:130px;height:125px;margin:10px;background-color: yellowgreen;? ? }盒子1盒子2盒子3

3：justify-content 的使用（彈性子元素在父容器中的位置） 如下：盒子居中顯示

image.png

/*justify-content屬性

? ? ? ? flex-start：從左到右排列

? ? ? ? flex-end：從右到左排列

? ? ? ? center：中間開始排列

? ? ? ? space-between：平分

? ? ? ? space-around：平分，且兩邊占1/2

? ? */.flex-container{display: flex;display: -webkit-flex;width:500px;background-color: darkcyan;justify-content: center;? ? }.flex-item{width:130px;height:125px;margin:10px;background-color: yellowgreen;? ? }盒子1盒子2盒子3

4：align-items的使用（設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式）如下：從底部開始顯示

image.png

/*align-items 屬性:側(cè)軸（縱軸）方向上的對(duì)齊方式。

? ? ? ? flex-start： 頂部開始

? ? ? ? flex-end： 低部開始

? ? ? ? center 居中

? ? ? ? baseline 彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條

? ? ? ? stretch

? ? */.flex-container{display: flex;display: -webkit-flex;width:500px;height:211px;background-color: darkcyan;align-items: flex-end;? ? }.flex-item{width:130px;height:125px;margin:10px;background-color: yellowgreen;? ? }盒子1盒子2盒子3

5：flex-wrap的使用（定彈性盒子的子元素?fù)Q行方式）如下：自動(dòng)換行

image.png

/*flex-wrap 屬性? ? ? ? nowrap - 默認(rèn)， 彈性容器為單行。該情況下彈性子項(xiàng)可能會(huì)溢出容器。? ? ? ? wrap - 彈性容器為多行。該情況下彈性子項(xiàng)溢出的部分會(huì)被放置到新行，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行? ? ? ? wrap-reverse -反轉(zhuǎn) wrap 排列。? ? */? ? ? ? .flex-container{? ? ? ? display: flex;? ? ? ? display: -webkit-flex;? ? ? ? width: 300px;? ? ? ? background-color: darkcyan;? ? ? ? flex-wrap:wrap;? ? }? ? ? ? .flex-item{? ? ? ? width: 130px;? ? ? ? height: 125px;? ? ? ? margin: 10px;? ? ? ? background-color: yellowgreen;? ? }盒子1盒子2盒子3

6：order的使用（定彈性盒子的子元素的排列順序）如下：居中

image.png

/*order 屬性

? ? ? ? ? 用整數(shù)值來定義排列順序，數(shù)值小的排在前面?？梢詾樨?fù)值

? ? */.flex-container{display: flex;display: -webkit-flex;width:465px;-webkit-flex-wrap: wrap;flex-wrap: wrap;background-color: darkcyan;align-content: center;-webkit-align-content:? center;? ? }.flex-item{width:130px;height:125px;margin:10px;background-color: yellowgreen;? ? }.tow{order: -1;-webkit-order: -1;? ? }盒子1盒子2盒子3

7：margin 屬性，完美居中

image.png

/*margin 屬性

? ? ? ? ? 完美居中

? ? */.flex-container{display: flex;display: -webkit-flex;width:365px;background-color: darkcyan;height:155px;? ? }.flex-item{width:130px;height:125px;margin: auto;background-color: yellowgreen;? ? }盒子1

8：align-self 屬性用于設(shè)置彈性元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式。

image.png

/*align-self 屬性用于設(shè)置彈性元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式。

? ? *

? ? flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。

? ? flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。

? ? center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。

? ? baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對(duì)齊。

? ? stretch:如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。

? ? */.flex-container{display: flex;display: -webkit-flex;width:465px;height:365px;background-color: darkcyan;? ? }.flex-item{width:130px;min-height:100px;margin:10px;background-color: yellowgreen;? ? }.one{align-self: flex-start;? ? }.tow{align-self: flex-end;? ? }.three{align-self: center;? ? }.four{align-self: stretch;? ? }盒子1盒子2盒子3盒子4

9:flex 用于指定彈性子元素如何分配空間。

image.png

/*flex 屬性用于指定彈性子元素如何分配空間。

? ? ? ? 比例分配

? ? */.flex-container{display: flex;display: -webkit-flex;width:400px;height:165px;background-color: darkcyan;? ? }.flex-item{margin:10px;background-color: yellowgreen;? ? }.one{flex:2;-webkit-flex:2;? ? }.tow{flex:1;-webkit-flex:1;? ? }.three{flex:1;-webkit-flex:1;? ? }盒子1盒子2盒子3

彈性盒子在開發(fā)中常常用得到，前端，app端；彈性盒布局模型可以作為 Web 開發(fā)人員工具箱中的一個(gè)很好的工具。

。