1.Flex布局是什么？
Flex是Flexible Box的縮寫，就是靈活的彈性頁面布局育特。
作用是為盒子模型提供強大的靈活性功能啃憎；
兼容性：也被所有主流瀏覽器所支持
Flex布局支持的瀏覽器
任何一個容器都可以指定為Flex布局，包括塊級元素和行內(nèi)元素次洼。
塊級元素的Flex布局聲明方式為
.box{display: flex;? }
行內(nèi)元素的Flex布局聲明方式為
.box{display: inline-flex;}
Webkit內(nèi)核的瀏覽器关贵，必須加上-webkit前綴
.box{display: -webkit-flex;/* Safari */display: flex;}
注意:設(shè)為Flex布局以后，子元素的float卖毁、clear和vertical-align屬性將失效坪哄。
2、基本概念
采用Flex布局的元素势篡，稱為Flex容器（flex container）翩肌，簡稱"容器"。它的所有子元素自動成為容器成員禁悠，稱為Flex項目（flex item）念祭，簡稱"項目"。
容器有兩根軸：
main axis（主軸）：容器中水平的稱為主軸碍侦；main start（主軸的開始位置）粱坤；main end（主軸的結(jié)束位置）隶糕；
cross axis（交叉軸）：容器中垂直于主軸的軸稱為交叉軸；cross start（交叉軸的開始位置）站玄；cross end（交叉軸的結(jié)束位置）枚驻；
需注意，項目默認是按照主軸排列的株旷，main size（單個項目占據(jù)的主軸空間）再登，cross size（單個項目占據(jù)的交叉軸空間）；
3.容器的屬性
flex-direction
flex-direction屬性決定主軸的方向（即項目的排列方向）晾剖。
.box{ flex-direction:row|row-reverse| column | column-reverse;}
row（默認值）：主軸為水平方向锉矢，起點在左端。
row-reverse：主軸為水平方向齿尽，起點在右端沽损。
column：主軸為垂直方向，起點在上沿循头。
column-reverse：主軸為垂直方向绵估，起點在下沿。
flex-wrap
flex-wrap屬性：默認情況下卡骂，項目都排在一條線（又稱"軸線"）上壹士。flex-wrap
屬性定義，如果一條軸線排不下偿警，可以選擇換行躏救。
.box{flex-wrap: nowrap | wrap | wrap-reverse;}
nowrap（默認）：不換行。wrap：換行螟蒸，第一行在上方盒使。wrap-reverse：換行，第一行在下方七嫌。
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式少办，默認值為row nowrap。
.box{flex-flow: || ;}
justify-content
justify-content屬性定義了項目在主軸上的對齊方式诵原。
.box { justify-content: flex-start | flex-end| center |space-between|space-around;}
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊英妓，項目之間的間隔都相等。
space-around：每個項目兩側(cè)的間隔相等绍赛。所以蔓纠，項目之間的間隔比項目與邊框的間隔大一倍。
align-items
align-items屬性定義項目在交叉軸上如何對齊吗蚌。
.box { align-items: flex-start |flex-end|center|baseline|stretch;}
flex-start：交叉軸的起點對齊腿倚。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊蚯妇。
baseline: 項目的第一行文字的基線對齊敷燎。
stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto暂筝，將占滿整個容器的高度。
align-content
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（默認值）：軸線占滿整個交叉軸宏悦。
4.項目的屬性
order
order屬性定義項目的排列順序镐确。數(shù)值越小，排列越靠前饼煞，默認為0源葫。
.item{order: x;};
flex-grow
flex-grow屬性定義項目的放大比例，默認為0砖瞧，即如果存在剩余空間息堂，也不放大。
如果所有項目的flex-grow屬性都為1块促，則它們將等分剩余空間（如果有的話）荣堰。如果一個項目的flex-grow屬性為2，其他項目都為1竭翠，則前者占據(jù)的剩余空間將比其他項多一倍振坚。
.item{flex-grow: ;/* default 0 */}
flex-shrink
flex-shrink屬性定義了項目的縮小比例，默認為1斋扰，即如果空間不足渡八，該項目將縮小。
如果所有項目的flex-shrink屬性都為1传货，當空間不足時屎鳍，都將等比例縮小。如果一個項目的flex-shrink屬性為0问裕，其他項目都為1哥艇，則空間不足時，前者不縮小僻澎。負值對該屬性無效貌踏。
.item{flex-shrink: ;/* default 1 */}
flex-basis
flex-basis屬性定義了在分配多余空間之前十饥，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性祖乳，計算主軸是否有多余空間逗堵。它的默認值為auto，即項目的本來大小眷昆。
它可以設(shè)為跟width或height屬性一樣的值（比如350px）蜒秤，則項目將占據(jù)固定空間。
.item{flex-basis: | auto;/* default auto */}
flex
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫亚斋，默認值為0 1 auto作媚。后兩個屬性可選。
該屬性有兩個快捷值：auto(1 1 auto) 和 none (0 0 auto)帅刊。
建議優(yōu)先使用這個屬性纸泡，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關(guān)值赖瞒。
.item{flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}
align-self
align-self屬性允許單個項目有與其他項目不一樣的對齊方式女揭，可覆蓋align-items屬性。默認值為auto栏饮，表示繼承父元素的align-items屬性吧兔，如果沒有父元素，則等同于stretch袍嬉。
該屬性可能取6個值境蔼，除了auto，其他都與align-items屬性完全一致伺通。
.item { align-self:auto|flex-start |flex-end|center|baseline|stretch;}
彈性布局先介紹到這里箍土，如果對您有所幫助的話，請點贊并關(guān)注哦泵殴，我會不定時的更新一下自己學習的經(jīng)驗以及見解涮帘，和大家進行交流。
您贊就是是我最大的動力Ｐψ纭５饔А！
