前言本篇文章進行學習css中的一個重點應用，布局樣式為flex布局，相信你學習了解過display屬性 ， position屬性，float屬性，但今天只學習新東西就是flex布局 。
flex布局是什么

文章插圖
flex是flexible box的縮寫，意思是彈性布局，代碼樣式如下：
.box { display: flex;}Flexbox Layout模塊是提供一個更有效的方式來布置，對齊和item之間在一個容器中分配的控件，即使它們的大小是未知的，或者是動態的，所以單詞命名flex(彈性工作制的)
flex布局可以使容器更改其item的寬度，高度，以便最好地填充可用空間，或者收縮它們來防止溢出 。flexbox布局使用比較合適應用程序的組件和小規模布局上 。
在webkit內核的瀏覽器中，要加上-webkit前綴哦，代碼格式如下：
.box { display: -webkit-flex; display: flex;}當設置flex布局之后，子元素（item）的float ， clear ， vertical-align屬性會失效 。
學習前要先了解概念

文章插圖
flex container flex items
設置flex布局的元素為flex容器（flex container） ， 簡稱為容器 。它的所有子元素都是容器的成員，flex項目（flex item），簡稱為項目 。那么請查看如下圖，解析flex布局背后的主要思想 。

文章插圖
如圖可以看出 ， main axis是從main-start到main-end，交叉軸cross axis從cross-start到cross-end 。
容器默認有兩根軸的，水平的主軸main axis和垂直的交叉軸cross axis，從main-start到main-end叫（main start）主軸；從cross axis從cross-start到cross-end叫（cross axis）交叉軸
單個項目占據的主軸空間叫main size，占據的交叉軸空間叫cross size
container彈性容器：

文章插圖
.container { display: flex;}items彈性項目:

文章插圖
容器的屬性

文章插圖

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction屬性決定的是主軸的方向，即是項目的排列方向
.box {flex-direction: row | row-reverse | column | column-reverse;}.flex-container {-webkit-flex-direction: row; /_ Safari _/flex-direction:row;}.flex-container {-webkit-flex-direction: row-reverse; /_ Safari _/flex-direction:row-reverse;}.flex-container {-webkit-flex-direction: column; /_ Safari _/flex-direction:column;}.flex-container {-webkit-flex-direction: column-reverse; /_ Safari _/flex-direction:column-reverse;}其使用flex-direction的box格式如下：
// 水平.box {flex-direction: row; }// 水平倒置.box {flex-direction: row-reverse; }// 垂直.box {flex-direction: column ; }// 垂直倒置.box {flex-direction: column-reverse; }

文章插圖
.box {width: 400upx;height: 300upx;background-color: #007AFF;margin: 10upx;}.item {width: 80upx;height: 80upx;background-color: #1CBBB4;border: 1upx solid #FFFFFF;}row：flex容器的主軸與當前寫入模式的內聯軸具有相同的方向 。主開始方向和主結束方向分別相當于當前寫入模式的開始方向和結束方向 。

文章插圖
.box-row {display: flex;flex-direction: row;}row-reverse: 與'row'相同，只是主開始方向和主結束方向交換了 。

文章插圖
.box-row-reverse {display: flex;flex-direction: row-reverse;}column: flex容器的主軸與當前寫入模式的塊軸方向相同 。主開始方向和主結束方向分別相當于當前書寫模式的前/頭和后/腳方向 。

文章插圖
.box-column {display: flex;flex-direction: column;}column-reverse: 與'column'相同 ， 只是主開始方向和主結束方向交換了 。

文章插圖
.box-column-reverse {display: flex;flex-direction: column-reverse;}flex-wrap屬性：根據伸縮容器中的可用空間，指定伸縮項是否換行以及它們換行到多行或多列的方向 。
.box{flex-wrap: nowrap | wrap | wrap-reverse;}.flex-container {-webkit-flex-wrap: nowrap; /_ Safari _/flex-wrap:nowrap;}.flex-container {-webkit-flex-wrap: wrap; /_ Safari _/flex-wrap:wrap;}.flex-container {-webkit-flex-wrap: wrap-reverse; /_ Safari _/flex-wrap:wrap-reverse;}

文章插圖
flex-wrap: nowrap: 不換行 。（所有彈性項目都將在一行上）

文章插圖
.box-flex-wrap-nowrap {display: flex;flex-wrap: nowrap;}flex-wrap: wrap: 換行，第一行在上方 。（彈性項目將從上到下纏繞在多行上）

文章插圖
.box-flex-wrap-wrap {display: flex;flex-wrap: wrap;}wrap-reverse: 換行，第一行在下方 。（彈性項目將從下到上纏繞在多行上）

文章插圖
.box-flex-wrap-wrap-reverse {display: flex;flex-wrap: wrap-reverse;}flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式 ， 默認值為row nowrap 。
.box {flex-flow: <flex-direction> || <flex-wrap>;}.container {flex-flow: column wrap;}

文章插圖
.box-flex-flow-1 {display: flex;flex-flow: auto; // flex-flow: row nowrap;}

文章插圖
.box-flex-flow-2 {display: flex;flex-flow: row wrap;}justify-content屬性:指定在解析了任意靈活長度和自動邊距后，伸縮項如何沿伸縮容器的主軸對齊 。(定義了項目在主軸上的對齊方式)
.box {justify-content: flex-start | flex-end | center | space-between | space-around;}flex-start
初始值 。伸縮項目被打包在行首 。第一個伸縮項的起始邊被放置在伸縮容器的開始處 。下一個伸縮項的起始邊與第一個伸縮項的結束邊按布局軸方向依次放置 。所有沿布局軸保留的空間都放置在布局軸的末端 。
.box-flex-justify-content-1 {display: flex;justify-content: flex-start;}如圖效果：

文章插圖
flex-end
彈性物品被打包到行尾 。第一個伸縮項的結束邊緣被放置在伸縮容器的末端 。下一個伸縮項目的結束邊緣與第一個伸縮項目的開始邊緣按布局軸方向依次放置 。沿布局軸剩下的所有空間都放置在布局軸的起點 。
.box-flex-justify-content-2 {display: flex;justify-content: flex-end;}如圖效果：

文章插圖
center
彈性物品被打包在線的中間 。flex項目在直線上放置沖洗彼此對齊線的中心,與等量的main-start邊緣之間的空白行和第一項之間的線,主要目的的邊緣線,最后一項 。(如果剩余的空閑空間是負的，伸縮項將在兩個方向上相等地溢出 。)
.box-flex-justify-content-3 {display: flex;justify-content: center;}如圖效果：

文章插圖
space-between
彈性項目均勻地分布在這條線上 。如果剩余的自由空間是負的 ， 或者一行上只有一個flex項目，這個值與' flex-start '相同 。否則,main-start保證的第一flex項目線的邊緣放置充裕的main-start邊緣線,最后一個flex項的主要目的利潤邊緣線放置充裕的主要目的邊緣線,和其余的flex項目的分布之間的間距與任何兩個相鄰物品是一樣的 。
.box-flex-justify-content-4 {display: flex;justify-content: space-between;}如圖效果：

文章插圖
space-around
彈性項目均勻地分布在線中，在兩端有一半大小的空間 。如果剩余的自由空間是負的，或者一行上只有一個伸縮項，這個值與' center '相同 。否則，行上的伸縮項的分布使行上任意兩個相鄰伸縮項之間的間距相同 ， 并且第一個/最后一個伸縮項與伸縮容器邊緣之間的間距為伸縮項之間間距的一半 。
.box-flex-justify-content-5 {display: flex;justify-content: space-around;}如圖效果：

文章插圖
space-evenly：分配項目 ， 以使任意兩個項目之間的間距（以及到邊緣的間距）相等 。

文章插圖
align-items屬性：指定伸縮容器中伸縮項的對齊值(垂直于由伸縮方向屬性定義的布局軸) 。
.box {align-items: flex-start | flex-end | center | baseline | stretch;}修改item樣式如圖:

文章插圖
.item1 {width: 100upx;height: 120upx;}.item2 {width: 100upx;height: 130upx;}.item3 {width: 100upx;height: 140upx;}flex-start：交叉軸的起點對齊 。

文章插圖
.box-flex-align-items-1 {display: flex;align-items: flex-start;}flex-end：交叉軸的終點對齊 。

文章插圖
.box-flex-align-items-2 {display: flex;align-items: flex-end;}center：交叉軸的中點對齊 。

文章插圖
.box-flex-align-items-3 {display: flex;align-items: center;}baseline: 項目的第一行文字的基線對齊 。
修改item ， 以第一行文字的基線對齊，想如圖效果，itme3-text頂部沒有剩余空間，就被強迫這樣了 。如果有空間，以第一個為標準對齊 ， 第一個item文本底線對齊 。
.item1-text {padding: 5upx;width: 120upx;height: 120upx;}.item2-text {width: 120upx;height: 130upx;}.item3-text {padding: 15upx;width: 120upx;height: 140upx;}

文章插圖
.box-flex-align-items-4 {display: flex;align-items: baseline;}stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度 。
修改item，沒有定義高度，如果有高度還是按照原來的高度呈現 。
.item-noheight {width: 100upx;border: 1upx solid #FFFFFF;}

文章插圖
.box-flex-align-items-5 {display: flex;align-items: stretch;}align-content屬性：指定當與flex-direction屬性定義的軸垂直的軸上有額外空間時，flex項目的行如何在flex容器內對齊 。
align-content屬性定義了多根軸線（多行）的對齊方式 。如果項目只有一根軸線，該屬性不起作用 。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;}flex-start：交叉軸的起點對齊

文章插圖
flex-end：與交叉軸的終點對齊

文章插圖
center：與交叉軸的中點對齊

文章插圖
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布

文章插圖
space-around：每根軸線兩側的間隔都相等，軸線之間的間隔比軸線與邊框的間隔大一倍

文章插圖
stretch：軸線占滿整個交叉軸

文章插圖
項目的屬性

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

order屬性定義項目的排序時，數值越小，排列越靠前，默認為0
.item {order: <integer>;}

文章插圖


文章插圖
flex-grow屬性定義項目的放大比例，默認為0 ， 如果還有存在剩余空間，也不會放大
如果所有項目的flex-grow屬性都為1，那么它們將等分剩余的空間，如果一個項目的flex-grow屬性為2，其他項目都為1，那么前者占據的剩余空間將比其他項目多一倍 。
.item {flex-grow: <number>; /* default 0 */}

文章插圖
flex-shrink屬性定義了項目的縮小的比例 ， 默認為1，如果空間不足，該項目將縮小
如果所有項目的flex-shrink屬性都為1 ， 當空間不足時，都將等比例縮小，如果一個項目的flex-shrink屬性都為0 ， 其他項目都為1，則空間不足時，前者不縮?。?負值對該屬性無效 。
.item {flex-shrink: <number>; /* default 1 */}

文章插圖
flex-basis屬性：定義了在分配多余空間之前，項目占據的主軸空間main size，瀏覽器根據這個屬性，計算主軸是否有多余空間 。它的默認值為auto，即是項目的本來的大小 。
.item {flex-basis: <length> | auto; /* default auto */}

文章插圖
flex屬性是flex-grow ， flex-shrink和flex-basis的簡寫，默認值為 0 1 auto ，后兩個屬性可選 。
【關于flex布局 flex是什么意思】.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}該屬性有兩個快捷值：auto（1 1 auto）和none（0 0 auto）
align-self屬性：允許單個項目有與其他項目不一樣的對齊方式 ， 可覆蓋align-items屬性，默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch 。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;}

文章插圖

• 學習方法演講稿_關于學習方法的演講稿
• 學習座右銘_關于學習的寄語，座右銘， 謝謝
• 學習對聯大全_有關學習對聯
• 如何輕松掌握flex子元素的兩個屬性的作用 flex是什么意思
• 學習保證書_關于好好學習 保證書
• 學習 名言_學習的名人名言有哪些？
• 孤獨個性簽名_說明自己孤獨的個性簽名
• 孤單個性簽名_一個孤單善良的個性簽名
• 孝順的故事_關于孝順的故事
• 孝順的成語_關于孝順的四字成語