一蔓肯、什么是Flexbox?
彈性盒模型（The Flexible Box Module）,又叫Flexbox创南，意為“彈性布局”，旨在通過彈性的方式來對齊和分布容器中內(nèi)容的空間省核，使其能適應(yīng)不同的屏幕稿辙，為盒裝模型提供最大的靈活性。
Flex布局的主要思想是：讓容器有能力讓其子項目能夠改變其寬度气忠、高度（甚至是順序）邻储，以最佳方式填充可用空間。
二旧噪、Flex布局基于flex-flow流
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）吨娜。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end淘钟；交叉軸的開始位置叫做cross start宦赠，結(jié)束位置叫做cross end勾扭。
項目默認(rèn)沿主軸排列妙色，單個項目占據(jù)的主軸空間叫做main size身辨，占據(jù)的交叉軸空間叫做cross size芍碧。
根據(jù)伸縮項目排列方式的不同定庵，主軸和側(cè)軸方向也有所變化：
三洗贰、Flex常用屬性
1.容器屬性
react-native中容器屬性有四種，分別是：flexDirction许布、flexWrap蜜唾、justifyContent庶艾、alignItems咱揍。
1.1 flexDirection屬性
該屬性決定主軸的方向（即項目的排列方向）煤裙。
row：主軸為水平方向，起點(diǎn)在左端且蓬。
row-reverse：主軸為水平方向恶阴，起點(diǎn)在右端冯事。
column(默認(rèn)值 )：主軸為垂直方向沼填，起點(diǎn)在上沿坞笙。
column-reverse：主軸為垂直方向薛夜，起點(diǎn)在下沿版述。
1.2 flexWrap屬性
默認(rèn)情況下晚伙，項目都排在一條線上（又稱“軸線”）上。flex-wrap屬性定義漓帚，如果一條軸線排不下尝抖，如何換行昧辽。
nowrap(默認(rèn)值 )：不換行
wrap：換行，第一行在上方
wrap-reverse：換行框咙，第一行在下方（和wrap 相反暇检，僅在網(wǎng)頁端可用）
1.3 justifyContent 屬性
該屬性定義了伸縮項目在主軸線的對齊方式
flex-start(默認(rèn)值 )：伸縮項目向一行的起始位置靠齊块仆。
flex-end：伸縮項目向一行的結(jié)束位置靠齊悔据。
center：伸縮項目向一行的中間位置靠齊俗壹。
space-between：兩端對齊，項目之間的間隔都相等头滔。
space-around：伸縮項目會平均地分布在行里坤检，兩端保留一半的空間期吓。
1.4 alignItems屬性
定義伸縮項目在交叉軸上如何對齊箭跳，可以把其想像成側(cè)軸（垂直于主軸）的 “對齊方式”。
flex-start ：交叉軸的起點(diǎn)對齊拯刁。
flex-end：交叉軸的終點(diǎn)對齊 垛玻。
center：交叉軸的中點(diǎn)對齊帚桩。
baseline：項目的第一行文字的基線對齊账嚎。（僅在web端可用郭蕉，react-native不可用）
stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為 auto召锈，將占滿整個容器的高度涨岁。
2.元素屬性
2.1 flex屬性
通過添加flex屬性， 我們明確地將他選為flexbox模式秉撇。flex只能指定一個數(shù)字值秋泄，用來決定子元素間獲得相對權(quán)重的大小印衔，都設(shè)為1則獲得相等的權(quán)重大小奸焙，分別設(shè)為1与帆、3了赌、1則獲得的權(quán)重比為1：3：1。
2.2 alignSelf屬性
“auto | flex-start | flex-end | center | baseline | stretch”
align-self屬性允許單個項目有與其他項目不一樣的對齊方式玄糟，可覆蓋align-items屬性勿她。
默認(rèn)值為auto，表示繼承父元素的align-items屬性阵翎，如果沒有父元素逢并，則等同于stretch。
