flexbox 的簡(jiǎn)介：

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、網(wǎng)站制作、莒縣網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、莒縣網(wǎng)絡(luò)營(yíng)銷、莒縣企業(yè)策劃、莒縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供莒縣建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

            flexbox 是 2009 年 W3C 提出的一種全新的可伸縮的 CSS 布局方式。依賴 flexbox，我們可以更簡(jiǎn)單，高效的完成可伸縮式頁(yè)面的布局。flexbox 一共經(jīng)歷了三個(gè)版本，分別為 old，tweener，new，這三種版本下的 display 屬性值不一樣，分別為 "display: box"，"display: flexbox"，"display: flex"。flexbox 中有兩個(gè)非常重要的概念：flex container（flex 容器） 和 flex item（flex 項(xiàng)目），當(dāng)我們給一個(gè)元素添加一個(gè) "display: flex" 屬性后，這個(gè)元素就會(huì)變成一個(gè) flex container ，它的直接子元素就會(huì)變成 flex item 成為一個(gè) flex container 成員。特別是當(dāng)我們給一個(gè)元素設(shè)置成 flex container 時(shí)，會(huì)在文檔中生成一個(gè)伸縮容器，伸縮容器會(huì)為子元素內(nèi)容生成一個(gè)伸縮容器上下文（FFC）。伸縮容器不是塊容器，所以 flex item 不能使用那些用來(lái)控制塊元素布局的屬性，例如，clear，float，vertical-align 屬性。

PS：flex container 默認(rèn)存在兩根軸線：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做 main start，結(jié)束位置叫做 main end；交叉軸的開始位置叫做  cross start，結(jié)束位置叫做 cross end。flex 項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做 main size，占據(jù)的交叉軸空間叫做 cross size。

flexbox 的屬性分為兩類： 一類為 flex 容器的屬性，另一類為 flex 項(xiàng)目的屬性。

            flexbox 容器的屬性：

                            justify-content

                            align-items

                            flex-direction

                            flex-wrap

                            flex-flow

                            align-content

            flexbox 項(xiàng)目的屬性：

                            order

                            flex-grow

                            flex-shrink

                            flex-basis

                            flex

                            align-self

1、justify-content  用來(lái)設(shè)置 flex item 在主軸方向上的對(duì)齊方式

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       justify-content: center;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
}

justify-content 屬性的值有：flex-start | flex-end | center | space-around | space-between。
       flex-start：默認(rèn)值，flex container 內(nèi)所有的 flex item 在主軸上按從左至右方向排列（左對(duì)齊）；
       flex-end：flex container 內(nèi)所有的 flex item 在主軸上按從右至左方向排列（右對(duì)齊）；
       center：flex container 內(nèi)所有的 flex item 在主軸上居中對(duì)齊；
       space-around：每個(gè) flex item 兩側(cè)的間隔相等并且項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍；
       space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等；

2、align-items  用來(lái)設(shè)置 flex item 在交叉軸方向上的對(duì)齊方式

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       align-items: center;
}
align-items 屬性的值有：flex-start | flex-end | center | baseline | stretch。
       flex-start：flex container 內(nèi)所有的 flex item 在交叉軸上按從上至下方向排列（頂部對(duì)齊）；
       flex-end：flex container 內(nèi)所有的 flex item 在交叉軸上按從下至上方向排列（底部對(duì)齊）；
       center：flex container 內(nèi)所有的 flex item 在交叉軸上居中對(duì)齊；
       baseline：所有 flex item 中的第一行文字的基線對(duì)齊；
       stretch：默認(rèn)值，如果 flex item 沒(méi)有設(shè)置高度或?yàn)?auto，flex item 將會(huì)占滿整個(gè)容器的高度；

3、flex-direction  用來(lái)設(shè)置主軸的方向

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       flex-direction: column;
}
flex-direction 屬性的值有：row | row-reverse | column | column-reverse。
       row：默認(rèn)值，主軸在水平方向上，起點(diǎn)在左端；
       row-reverse：主軸在水平方向上，起點(diǎn)在右端；
       column：主軸在垂直方向上，起點(diǎn)在上沿；
       column-reverse：主軸在垂直方向上，起點(diǎn)在下沿；

4、flex-wrap  用來(lái)設(shè)置 flex item 是否進(jìn)行多行并反轉(zhuǎn)排列

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       flex-wrap: wrap;
}
flex-wrap 屬性的值有：nowrap | wrap | wrap-reverse。
       nowrap：默認(rèn)值，所有的 flex item 排列在一條水平的軸線上，不換行；
       wrap：換行，第一行在上方；
       wrap-reverse：換行，第一行在下方；

5、flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡(jiǎn)寫形式，默認(rèn)值為 row nowrap

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       flex-flow: column-reverse wrap-reverse;
}
flex-flow 屬性的值有：row | row-reverse | column | column-reverse | nowrap | wrap | wrap-reverse。

6、align-content 屬性定義了多根軸線的對(duì)齊方式，如果容器只有一根軸線，該屬性不起作用

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
       align-content: center;
}
align-content 屬性的值有：flex-start | flex-end | center | space-around | space-between | stretch。
       flex-start：與交叉軸的起點(diǎn)對(duì)齊；
       flex-end：與交叉軸的終點(diǎn)對(duì)齊；
       center：與交叉軸的中點(diǎn)對(duì)齊；
       space-around：每根軸線的兩側(cè)間隔相等，并且軸線之間的間隔比軸線與邊框的間隔大一倍；
       space-between：與交叉軸的兩端對(duì)齊，并且軸線之間的間隔都相等；
       stretch：默認(rèn)值，軸線將占滿整個(gè)交叉軸；

7、order 屬性用于調(diào)整 flex item 的順序（數(shù)值越大，排列越靠后）

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       order: 1;
}
order 屬性的值有：-1 | 0 | 1 |  integer，默認(rèn)值為 0。

8、flex-grow 屬性用于定義 flex item 的放大比例（設(shè)置負(fù)值無(wú)效）

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       flex-grow: 1;
}
flex-grow 屬性的值：number，默認(rèn)值為 0，即存在剩余空間也不放大。
PS：如果所有 flex item 的 flex-grow 屬性值都為 1，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的 flex-grow 屬性值為 2，其他項(xiàng)目都為 1，則前者占據(jù)的剩余空間將比其他項(xiàng)目多一倍。

9、flex-shrink 屬性用于定義 flex item 的縮小比例（設(shè)置負(fù)值無(wú)效）

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       flex-shrink: 1;
}
flex-shrink 屬性的值：number，默認(rèn)值為 1，即空間不足該項(xiàng)目將縮小。
PS：如果所有項(xiàng)目的 flex-shrink 屬性值都為 1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink 屬性值為 0，其他項(xiàng)目都為 1，則空間不足時(shí)，前者將不會(huì)縮小。

10、flex-basis 屬性用于定義 flex item 占據(jù)主軸空間的大小

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       flex-basis: 100%;
}
flex-basis 屬性的值：length，默認(rèn)值為 auto，即項(xiàng)目的本來(lái)大小。也可以設(shè)置固定值，如500px。
特別注意當(dāng) flex-basis 值為 0 時(shí) flex item 分配的是容器所有的空間；當(dāng) flex-basis 值為 auto 時(shí) flex item 分配的是容器減去所有 flex item 內(nèi)容之后剩余的容器空間。

11、flex 屬性是 flex-grow，flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫形式，默認(rèn)值為 0 1 auto

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       flex: 1 100%;
}
flex 屬性的值有兩個(gè)縮寫 none（0 0 auto），auto（1 1 auto）。

12、align-self 屬性用于設(shè)置單個(gè)項(xiàng)目與其他的項(xiàng)目不一樣的對(duì)齊方式，可覆蓋容器的 align-items 屬性

具體示例：
#container {
       display: -webkit-flex;
       display: -moz-flex;
       display: -ms-flex;
       display: -o-flex;
       display: flex;
}
.item {
       width: 100px;
       height: 200px;
       border: 1px solid #000;
       align-self: flex-end;
}
align-self 屬性的值有：flex-start | flex-end | center | baseline | stretch | auto。
       flex-start：flex container 內(nèi)所有的 flex item 在交叉軸上按從上至下方向排列（頂部對(duì)齊）；
       flex-end：flex container 內(nèi)所有的 flex item 在交叉軸上按從下至上方向排列（底部對(duì)齊）；
       center：flex container 內(nèi)所有的 flex item 在交叉軸上居中對(duì)齊；
       baseline：所有 flex item 中的第一行文字的基線對(duì)齊；
       stretch：如果 flex item 沒(méi)有設(shè)置高度或?yàn)?auto，flex item 將會(huì)占滿整個(gè)容器的高度；
       auto：默認(rèn)值，繼承容器的 align-items 屬性。如果容器沒(méi)有該屬性，則等同于 stretch；

PS：一個(gè)好玩的 flexbox 學(xué)習(xí)網(wǎng)站：http://flexboxfroggy.com/#zh-cn

       flexbox bugs 問(wèn)題及解決方法：https://github.com/philipwalton/flexbugs