哪吒鬧海，席卷圖文學習前端Flex布局
哪吒人生信條：如果你所學的東西 處于喜歡 才會有強大的動力支撐。
把你的前端拿捏得死死的，每天學習得爽爽的，微信搜索【程序員哆啦A夢】關(guān)注這個不一樣的程序員，如果你所學的東西 處于喜歡 才會有強大的動力支撐。
感謝不負每一份熱愛前端的程序員，不論前端技能有多奇葩，歡迎關(guān)注加我入群vx:xiaoda0423
前言
本篇文章進行學習css中的一個重點應(yīng)用，布局樣式為flex布局，相信你學習了解過display屬性，position屬性，float屬性，但今天只學習新東西就是flex布局。
flex布局是什么
flex是flexible box的縮寫，意思是彈性布局，代碼樣式如下：
.box?{
?display:?flex;
}
Flexbox Layout模塊是提供一個更有效的方式來布置，對齊和item之間在一個容器中分配的控件，即使它們的大小是未知的，或者是動態(tài)的，所以單詞命名flex(彈性工作制的)
flex布局可以使容器更改其item的寬度，高度，以便最好地填充可用空間，或者收縮它們來防止溢出。flexbox布局使用比較合適應(yīng)用程序地組件和小規(guī)模布局上。
在webkit內(nèi)核地瀏覽器中，要加上-webkit前綴哦，代碼格式如下：
.box?{
?display:?-webkit-flex;
?display:?flex;
}
當設(shè)置flex布局之后，子元素（item）的float，clear，vertical-align屬性會失效。
學習前要先了解概念
flex containerflex items
設(shè)置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）交叉軸
單個項目占據(jù)的主軸空間叫main size，占據(jù)的交叉軸空間叫cross size
container彈性容器：
.container?{
?display:?flex;
}
items彈性項目:
容器的屬性
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-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容器的主軸與當前寫入模式的內(nèi)聯(lián)軸具有相同的方向。主開始方向和主結(jié)束方向分別相當于當前寫入模式的開始方向和結(jié)束方向。
.box-row?{
?display:?flex;
?flex-direction:?row;
}
row-reverse: 與'row'相同，只是主開始方向和主結(jié)束方向交換了。
.box-row-reverse?{
?display:?flex;
?flex-direction:?row-reverse;
}
column: flex容器的主軸與當前寫入模式的塊軸方向相同。主開始方向和主結(jié)束方向分別相當于當前書寫模式的前/頭和后/腳方向。
.box-column?{
?display:?flex;
?flex-direction:?column;
}
column-reverse: 與'column'相同，只是主開始方向和主結(jié)束方向交換了。
.box-column-reverse?{
?display:?flex;
?flex-direction:?column-reverse;
}
flex-wrap屬性：根據(jù)伸縮容器中的可用空間，指定伸縮項是否換行以及它們換行到多行或多列的方向。
.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:??||?;
}
.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
初始值。伸縮項目被打包在行首。第一個伸縮項的起始邊被放置在伸縮容器的開始處。下一個伸縮項的起始邊與第一個伸縮項的結(jié)束邊按布局軸方向依次放置。所有沿布局軸保留的空間都放置在布局軸的末端。
.box-flex-justify-content-1?{
?display:?flex;
?justify-content:?flex-start;
}
如圖效果：
flex-end
彈性物品被打包到行尾。第一個伸縮項的結(jié)束邊緣被放置在伸縮容器的末端。下一個伸縮項目的結(jié)束邊緣與第一個伸縮項目的開始邊緣按布局軸方向依次放置。沿布局軸剩下的所有空間都放置在布局軸的起點。
.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屬性：指定伸縮容器中伸縮項的對齊值(垂直于由伸縮方向?qū)傩远x的布局軸)。
.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（默認值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
修改item，沒有定義高度，如果有高度還是按照原來的高度呈現(xiàn)。
.item-noheight?{
?width:?100upx;
?border:?1upx?solid?#FFFFFF;
}
.box-flex-align-items-5?{
?display:?flex;
?align-items:?stretch;
}
align-content屬性：指定當與flex-direction屬性定義的軸垂直的軸上有額外空間時，flex項目的行如何在flex容器內(nèi)對齊。
align-content屬性定義了多根軸線（多行）的對齊方式。如果項目只有一根軸線，該屬性不起作用。
.box?{
??align-content:?flex-start?|?flex-end?|?center?|?space-between?|?space-around?|?stretch;
}
flex-start：交叉軸的起點對齊
flex-end：與交叉軸的終點對齊
center：與交叉軸的中點對齊
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布
space-around：每根軸線兩側(cè)的間隔都相等，軸線之間的間隔比軸線與邊框的間隔大一倍
stretch：軸線占滿整個交叉軸
項目的屬性
orderflex-growflex-shrinkflex-basisflexalign-self
order屬性定義項目的排序時，數(shù)值越小，排列越靠前，默認為0
.item?{
??order:?<integer>;
}
flex-grow屬性定義項目的放大比例，默認為0，如果還有存在剩余空間，也不會放大
如果所有項目的flex-grow屬性都為1，那么它們將等分剩余的空間，如果一個項目的flex-grow屬性為2，其他項目都為1，那么前者占據(jù)的剩余空間將比其他項目多一倍。
.item?{
??flex-grow:?;?/*?default?0?*/
}
flex-shrink屬性定義了項目的縮小的比例，默認為1，如果空間不足，該項目將縮小
如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小，如果一個項目的flex-shrink屬性都為0，其他項目都為1，則空間不足時，前者不縮小，負值對該屬性無效。
.item?{
??flex-shrink:?;?/*?default?1?*/
}
flex-basis屬性：定義了在分配多余空間之前，項目占據(jù)的主軸空間main size，瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即是項目的本來的大小。
.item?{
??flex-basis:??|?auto;?/*?default?auto?*/
}
flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值為0 1 auto，后兩個屬性可選。
.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;
}
點贊、收藏和評論
我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，我們下期見！(如本文內(nèi)容有地方講解有誤，歡迎指出?謝謝，一起學習了)
我們下期見！
文章持續(xù)更新，可以微信搜一搜「 程序員哆啦A夢 」第一時間閱讀，回復【資料】有我準備的一線大廠資料，本文 http://www.dadaqianduan.cn/#/ 已經(jīng)收錄，歡迎Star。