Flexbox布局
flexbox由Flex容器和Flex項(xiàng)目組成爵嗅，容器即父元素娇澎，項(xiàng)目即子元素 任何一個元素可以指定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è)置元素的垂直對齊方式)
指定主軸的方向
flex-direction:row|row-reverse| column | column-reverse
row(默認(rèn)值)：伸縮容器若為水平方向軸锉试，伸縮項(xiàng)目的排版方式為從左到右排列猫十。
row-reverse：伸縮容器若為水平方向軸，伸縮項(xiàng)目排版方式為從右到左排列。
column：伸縮容器若為垂直方向軸拖云，伸縮項(xiàng)目的排版方式為從上到下排列贷笛。
column-reverse：伸縮容器若為垂直方向軸，伸縮項(xiàng)目的排版方式為從下到上排列宙项。
指定主軸方向空間不足時昨忆，是否換行及該如何換行
flex-wrap:nowrap |wrap|wrap-reverse
nowrap：即使空間不足，伸縮容器也不允許換行杉允。
wrap：空間不足時邑贴，允許換行，若主軸為水平軸叔磷，則換行方向?yàn)閺纳系较隆?/p>
wrap-reverse：空間不足時拢驾，允許換行，若主軸為水平軸改基，則換行方向?yàn)閺南碌缴希ㄅcwrap時候相反）繁疤。
flex-flow:flex-directionflex-wrap
此屬性是flex-direction和flex-wrap的縮寫版本
指定沿主軸線的對齊方式
justify-content:flex-start | flex-end| center |space-between|space-around
flex-start：向主軸線的其實(shí)位置靠齊（默認(rèn)值）
flex-end：向主軸線的結(jié)束位置靠齊
center：向主軸線的中心位置靠齊
space-between：平均分布在主軸線里，第一個伸縮項(xiàng)目在主軸線的開始位置秕狰，最后一個伸縮項(xiàng)目在主軸線的結(jié)束位置
space-around：伸縮項(xiàng)目平均分布在主軸線里稠腊，兩端保留一半的空間
指定伸縮項(xiàng)目在側(cè)軸方向上的對齊方式
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"等效鸣哀，其他情況架忌，該值參與基線對齊
stretch：向側(cè)軸方向拉伸填充整個容器
伸縮項(xiàng)目出現(xiàn)換行后在側(cè)軸方向上的對齊方式，要換行必須要有flex-wrap:wrap,其實(shí)意思就是換行后每行之間的對齊方式
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
這個屬性定義項(xiàng)目的排列順序叹放，數(shù)值越小，排列越靠前挠羔，默認(rèn)值為0
order:integer
定義伸縮項(xiàng)目的放大比例井仰，默認(rèn)值為0，即若存在剩余空間破加，也不放大俱恶。比如所有伸縮項(xiàng)目的flex-grow為1，那么每個伸縮項(xiàng)目將設(shè)置為一個大小相等的剩余空間范舀；如果你將其中一個伸縮項(xiàng)目的flex-grow設(shè)置為2合是，那么這個伸縮項(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)空間不足時捶惜，都將等比例縮小田藐，如果一個項(xiàng)目的flex-shrink的值為0，其他項(xiàng)目為1，當(dāng)空間不足時汽久，前者不縮小鹤竭。
設(shè)置伸縮項(xiàng)目的基準(zhǔn)值，剩余的空間按比率進(jìn)行伸縮
flex-basis:length| auto
flex是flex-grow景醇、flex-shrink和flex-basis這三個的縮寫
flex:none | flex-grow flex-shrink flex-basis/*
? ? flex-shrink和flex-basis是可選參數(shù)
*/
此處如果flex值為1,相當(dāng)于flex-grow值為1臀稚，該元素把伸縮容器的剩余空間占滿。
設(shè)置單個的伸縮項(xiàng)目在側(cè)軸上的對齊方式三痰，可以覆蓋align-items屬性吧寺，默認(rèn)值為auto
align-self:auto|flex-start |flex-end|center|baseline|stretch
auto是繼承父元素的align-items屬性，如果沒有父元素散劫，則按照stretch來計(jì)算其值稚机，其他的同align-items。
接下來總結(jié)一下下react-native中flexbox的使用获搏，在react-native中flexDirection赖条、alignItems和justifyContent可以滿足大多數(shù)布局需求。
alignItems
alignSelf
flex
flexDirection
flexWrap
justifyContent
用法同前面說的align-items常熙，區(qū)別在與react-native中需要使用駝峰寫法
alignItems:flex-start |flex-end|center|stretch
用法同前面說的align-self纬乍，區(qū)別在與react-native中需要使用駝峰寫法
alignSelf:auto|flex-start |flex-end|center|stretch
用法同前面說的flex
flex：number
用法同前面說的flex-direciton，但react-native中默認(rèn)是column
flexDirection:row|column
用法同前面說的flex-wrap裸卫，區(qū)別在與react-native中需要使用駝峰寫法
flexWrap:wrap| nowrap
用法同前面說的justifyContent仿贬，區(qū)別在與react-native中需要使用駝峰寫法
justifyContent: flex-start | flex-end| center |space-between|space-around
哈哈哈??！Ｄ够摺诅蝶！
