Flexbox布局
flexbox由Flex容器和Flex項(xiàng)目組成，容器即父元素，項(xiàng)目即子元素 任何一個(gè)元素可以指定flexbox布局，設(shè)為display:flex或display:inline-flex。
更好理解伸縮流，看下圖
主軸既可以是水平軸，也可以是垂直軸,項(xiàng)目默認(rèn)沿主軸排列,還是看圖比較明了。
瀏覽器支持屬性有
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
指定元素是否為伸縮容器
display:flex |inline-flex
注意設(shè)為flex布局后，子元素的float、clear和vertical-align屬性失效(vertical-align設(shè)置元素的垂直對(duì)齊方式)
指定主軸的方向
flex-direction:row|row-reverse| column | column-reverse
row(默認(rèn)值)：伸縮容器若為水平方向軸，伸縮項(xiàng)目的排版方式為從左到右排列。
row-reverse：伸縮容器若為水平方向軸，伸縮項(xiàng)目排版方式為從右到左排列。
column：伸縮容器若為垂直方向軸，伸縮項(xiàng)目的排版方式為從上到下排列。
column-reverse：伸縮容器若為垂直方向軸，伸縮項(xiàng)目的排版方式為從下到上排列。
指定主軸方向空間不足時(shí)，是否換行及該如何換行
flex-wrap:nowrap |wrap|wrap-reverse
nowrap：即使空間不足，伸縮容器也不允許換行。
wrap：空間不足時(shí)，允許換行，若主軸為水平軸，則換行方向?yàn)閺纳系较隆?/p>
wrap-reverse：空間不足時(shí)，允許換行，若主軸為水平軸，則換行方向?yàn)閺南碌缴希ㄅcwrap時(shí)候相反）。
flex-flow:flex-directionflex-wrap
此屬性是flex-direction和flex-wrap的縮寫(xiě)版本
指定沿主軸線的對(duì)齊方式
justify-content:flex-start | flex-end| center |space-between|space-around
flex-start：向主軸線的其實(shí)位置靠齊（默認(rèn)值）
flex-end：向主軸線的結(jié)束位置靠齊
center：向主軸線的中心位置靠齊
space-between：平均分布在主軸線里，第一個(gè)伸縮項(xiàng)目在主軸線的開(kāi)始位置，最后一個(gè)伸縮項(xiàng)目在主軸線的結(jié)束位置
space-around：伸縮項(xiàng)目平均分布在主軸線里，兩端保留一半的空間
指定伸縮項(xiàng)目在側(cè)軸方向上的對(duì)齊方式
align-items:flex-start |flex-end|center|baseline|stretch
flex-start：向側(cè)軸的起始位置靠齊
flex-end：向側(cè)軸的結(jié)束位置靠齊
center：向側(cè)軸的中心位置靠齊
baseline：如伸縮項(xiàng)目的行內(nèi)軸與側(cè)軸為同一條，則該值與"flex-start"等效，其他情況，該值參與基線對(duì)齊
stretch：向側(cè)軸方向拉伸填充整個(gè)容器
伸縮項(xiàng)目出現(xiàn)換行后在側(cè)軸方向上的對(duì)齊方式，要換行必須要有flex-wrap:wrap,其實(shí)意思就是換行后每行之間的對(duì)齊方式
align-content:flex-start |flex-end|center|space-between |space-around |stretch
flex-start：向側(cè)軸的起始位置靠齊
flex-end：向側(cè)軸的結(jié)束位置靠齊
center：向側(cè)軸的中心位置靠齊
space-between：在側(cè)軸中平均分布
space-around：在側(cè)軸中平均分布，且在兩邊各有一半的空間
stretch：在側(cè)軸上伸展以占用剩余的空間
伸縮項(xiàng)目支持屬性有
order
flex-grow
flex-shrink
flex-basis
flex
align-self 3e
這個(gè)屬性定義項(xiàng)目的排列順序，數(shù)值越小，排列越靠前，默認(rèn)值為0
order:integer
定義伸縮項(xiàng)目的放大比例，默認(rèn)值為0，即若存在剩余空間，也不放大。比如所有伸縮項(xiàng)目的flex-grow為1，那么每個(gè)伸縮項(xiàng)目將設(shè)置為一個(gè)大小相等的剩余空間；如果你將其中一個(gè)伸縮項(xiàng)目的flex-grow設(shè)置為2，那么這個(gè)伸縮項(xiàng)目所占的剩余空間是其他伸縮項(xiàng)目所占剩余空間的2倍。
flex-grow:number
定義伸縮項(xiàng)目的收縮能力,即如果空間不足，該項(xiàng)目將縮小
flex-shrink:number//默認(rèn)值為1
如果所有項(xiàng)目的flex-shrink的值都為1，當(dāng)空間不足時(shí)，都將等比例縮小，如果一個(gè)項(xiàng)目的flex-shrink的值為0，其他項(xiàng)目為1，當(dāng)空間不足時(shí)，前者不縮小。
設(shè)置伸縮項(xiàng)目的基準(zhǔn)值，剩余的空間按比率進(jìn)行伸縮
flex-basis:length| auto
flex是flex-grow、flex-shrink和flex-basis這三個(gè)的縮寫(xiě)
flex:none | flex-grow flex-shrink flex-basis/*
? ? flex-shrink和flex-basis是可選參數(shù)
*/
此處如果flex值為1,相當(dāng)于flex-grow值為1，該元素把伸縮容器的剩余空間占滿。
設(shè)置單個(gè)的伸縮項(xiàng)目在側(cè)軸上的對(duì)齊方式，可以覆蓋align-items屬性，默認(rèn)值為auto
align-self:auto|flex-start |flex-end|center|baseline|stretch
auto是繼承父元素的align-items屬性，如果沒(méi)有父元素，則按照stretch來(lái)計(jì)算其值，其他的同align-items。
接下來(lái)總結(jié)一下下react-native中flexbox的使用，在react-native中flexDirection、alignItems和justifyContent可以滿足大多數(shù)布局需求。
alignItems
alignSelf
flex
flexDirection
flexWrap
justifyContent
用法同前面說(shuō)的align-items，區(qū)別在與react-native中需要使用駝峰寫(xiě)法
alignItems:flex-start |flex-end|center|stretch
用法同前面說(shuō)的align-self，區(qū)別在與react-native中需要使用駝峰寫(xiě)法
alignSelf:auto|flex-start |flex-end|center|stretch
用法同前面說(shuō)的flex
flex：number
用法同前面說(shuō)的flex-direciton，但react-native中默認(rèn)是column
flexDirection:row|column
用法同前面說(shuō)的flex-wrap，區(qū)別在與react-native中需要使用駝峰寫(xiě)法
flexWrap:wrap| nowrap
用法同前面說(shuō)的justifyContent，區(qū)別在與react-native中需要使用駝峰寫(xiě)法
justifyContent: flex-start | flex-end| center |space-between|space-around
哈哈哈??！！！
