一、什么是Flexbox?
彈性盒模型（The Flexible Box Module）,又叫Flexbox，意為“彈性布局”，旨在通過彈性的方式來對(duì)齊和分布容器中內(nèi)容的空間，使其能適應(yīng)不同的屏幕，為盒裝模型提供最大的靈活性。
Flex布局的主要思想是：讓容器有能力讓其子項(xiàng)目能夠改變其寬度、高度（甚至是順序），以最佳方式填充可用空間。
二、Flex布局基于flex-flow流
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)沿主軸排列，單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
根據(jù)伸縮項(xiàng)目排列方式的不同，主軸和側(cè)軸方向也有所變化：
三、Flex常用屬性
1.容器屬性
react-native中容器屬性有四種，分別是：flexDirction、flexWrap、justifyContent、alignItems。
1.1 flexDirection屬性
該屬性決定主軸的方向（即項(xiàng)目的排列方向）。
row：主軸為水平方向，起點(diǎn)在左端。
row-reverse：主軸為水平方向，起點(diǎn)在右端。
column(默認(rèn)值 )：主軸為垂直方向，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向，起點(diǎn)在下沿。
1.2 flexWrap屬性
默認(rèn)情況下，項(xiàng)目都排在一條線上（又稱“軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
nowrap(默認(rèn)值 )：不換行
wrap：換行，第一行在上方
wrap-reverse：換行，第一行在下方（和wrap 相反，僅在網(wǎng)頁端可用）
1.3 justifyContent 屬性
該屬性定義了伸縮項(xiàng)目在主軸線的對(duì)齊方式
flex-start(默認(rèn)值 )：伸縮項(xiàng)目向一行的起始位置靠齊。
flex-end：伸縮項(xiàng)目向一行的結(jié)束位置靠齊。
center：伸縮項(xiàng)目向一行的中間位置靠齊。
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
space-around：伸縮項(xiàng)目會(huì)平均地分布在行里，兩端保留一半的空間。
1.4 alignItems屬性
定義伸縮項(xiàng)目在交叉軸上如何對(duì)齊，可以把其想像成側(cè)軸（垂直于主軸）的 “對(duì)齊方式”。
flex-start ：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊 。
center：交叉軸的中點(diǎn)對(duì)齊。
baseline：項(xiàng)目的第一行文字的基線對(duì)齊。（僅在web端可用，react-native不可用）
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為 auto，將占滿整個(gè)容器的高度。
2.元素屬性
2.1 flex屬性
通過添加flex屬性， 我們明確地將他選為flexbox模式。flex只能指定一個(gè)數(shù)字值，用來決定子元素間獲得相對(duì)權(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屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。
默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
