1.flex布局的兼容性寫法
關(guān)于flex布局的兼容性，參考flex兼容性
.flex{
????display:-webkit-box;
? ? display: -moz-box;
? ? display: -ms-flexbox;
? ? display: -webkit-flex;
? ? display: flex;
}
flex布局中有兩波屬性，一波作用在flex盒子上，一波作用在flex盒子內(nèi)部的元素（也叫項(xiàng)目）上
設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
2.作用在flex盒子上的屬性
?flex-direction????row | row-reverse | column | column-reverse
?flex-wrap?????????nowrap| wrap|wrap-reverse
?flex-flow?????????rownowrap
?justify-content???center|space-between|space-around|flex-start|flex-end
?align-items???????center|baseline|stretch|flex-start|flex-end
?align-content?????center|space-between|space-around|flex-start|flex-end|stretch
2.1 flex-direction????row | row-reverse | column |column-reverse
該屬性定義主軸的方向，即項(xiàng)目的排列方向，容器的屬性中有的是主軸方向的屬性，有的是交叉軸方向的屬性，合理的定義主軸的方向可以更好的布局。
row：默認(rèn)屬性，主軸為水平方向，起點(diǎn)在左端? ?；row-reverse:主軸為水平方向，起點(diǎn)在右端
column：主軸為垂直方向，起點(diǎn)在上方? ?；column-reverse：主軸為垂直方向，起點(diǎn)在下方
2.2? flex-wrap?????????nowrap| wrap|wrap-reverse
該屬性決定容器內(nèi)的項(xiàng)目排列是否換行，怎么換行
nowrap：默認(rèn)屬性，不換行
wrap:正常換行
wrap-reverse:第一行在下面
2.3flex-flow?
是前兩個(gè)屬性的綜合，第一個(gè)參數(shù)是flex-direction，第二個(gè)屬性是flex-wrap，兩個(gè)屬性的取值任意組合，默認(rèn)是row nowrap，用集合表示為
?A={row,row-reverse , column ,column-reverse }
?B={nowrap,wrap,wrap-reverse }
flex-flow:[a ] [b]，其中a屬于集合A，b屬于集合B
2.4justify-content? ?
center|space-between|space-around|space-evenly|flex-start|flex-end
定義主軸方向上的對(duì)齊方式
center：在主軸方向上居中
space-between：第一個(gè)和最后一個(gè)項(xiàng)目抵邊。各個(gè)項(xiàng)目之前的間距平分剩余空間，即將主軸的剩余空間等分成 n-1（n是項(xiàng)目的個(gè)數(shù)）份，每兩個(gè)項(xiàng)目之間的間距都占一份
space-around：各個(gè)項(xiàng)目之前的間距是首尾兩個(gè)項(xiàng)目與邊緣間距的2倍，即將主軸的剩余空間等分成2n（n是項(xiàng)目的個(gè)數(shù)）份，每個(gè)項(xiàng)目的兩邊都占一份，也就是說兩個(gè)項(xiàng)目的間距是2分，項(xiàng)目距離兩個(gè)端的距離是1份
space-evenly：容器邊緣到項(xiàng)目的間距與兩個(gè)項(xiàng)目之間的間距相等（瀏覽器支持較差），即將主軸的剩余空間等分成 n+1（n是項(xiàng)目的個(gè)數(shù)）份，兩個(gè)項(xiàng)目之間以及項(xiàng)目到端點(diǎn)的距離都是1份
flex-start：默認(rèn)屬性，與主軸開始的位置對(duì)齊
flex-end:與主軸的末端對(duì)齊
舉個(gè)栗子，做項(xiàng)目的過程中遇到一個(gè)首頁展示三個(gè)欄目的情況，這三個(gè)欄目整體居中，中間有間隔
2.5 align-items
center|baseline|stretch|flex-start|flex-end
定義交叉軸方向上的對(duì)齊方式
center：在交叉軸方向上居中排列
baseline：項(xiàng)目的第一行文字對(duì)齊
stretch：如果項(xiàng)目沒有設(shè)置高度就會(huì)在交叉軸上占滿整個(gè)容器
flex-start：交叉軸的起始位置對(duì)齊
flex-end：交叉軸的末端對(duì)齊
舉個(gè)主軸交叉軸都對(duì)齊的栗子
2.6 align-content
?center|space-between|space-around|space-evenly|flex-start|flex-end?
定義多條軸線的對(duì)齊方式
center：在交叉軸方向上居中
space-between：第一個(gè)和最后一個(gè)項(xiàng)目抵邊。各個(gè)項(xiàng)目之前的間距平分剩余空間
space-around：各個(gè)項(xiàng)目之前的間距是首尾兩個(gè)項(xiàng)目與邊緣間距的2倍
space-evenly：容器邊緣到項(xiàng)目的間距與兩個(gè)項(xiàng)目之間的間距相等（瀏覽器支持較差）
flex-start：默認(rèn)屬性，與交叉軸開始的位置對(duì)齊
flex-end:與交叉軸的末端對(duì)齊
3.項(xiàng)目的屬性
?order：項(xiàng)目的排列順序，默認(rèn)0，數(shù)字越小排列越靠前
?flex-grow：項(xiàng)目的放大比例，默認(rèn)為0，即使有剩余空間也不放大，第一個(gè)項(xiàng)目的flex-grow為1，有剩余空間時(shí)第一個(gè)項(xiàng)目占滿剩余空間，如圖1所示，此時(shí)無論第一的項(xiàng)目的flex-grow的值為多少，第一個(gè)項(xiàng)目所占的空間都是容器剩余空間的大??；如果第一個(gè)項(xiàng)目的flex-grow為2，其他的為1，那么在有剩余空間時(shí)，所有的項(xiàng)目都會(huì)被放大，同時(shí)第一個(gè)項(xiàng)目的空間是其他項(xiàng)目所占空間的2倍，如圖2所示
?flex-shrink：項(xiàng)目的縮小比例，默認(rèn)為1，為0時(shí)不縮小，將第一個(gè)項(xiàng)目的flex-shrink屬性值設(shè)為0 ，會(huì)發(fā)現(xiàn)在瀏覽器窗口縮小的過程中其他項(xiàng)目等比例縮小，只有第一個(gè)項(xiàng)目保持不變，如圖3
?flex-basis：項(xiàng)目占據(jù)主軸的空間，默認(rèn)為auto，項(xiàng)目原本的大小，可以是一個(gè)100px這樣類似于寬度的值
?flex：前面三個(gè)的簡寫，默認(rèn)0 1 auto
?align-self?：項(xiàng)目自己在交叉軸方向的對(duì)齊方式，屬性有center|baseline|stretch|flex-start|flex-end，基本用法與align-items相同
4.小結(jié)
目前市場上大部分主流瀏覽器對(duì)flex的支持還是蠻好的，但是總會(huì)有些例外，具體問題具體分析?？傊饔?。
