flex布局是什么
Flex是Flexible Box的縮寫利朵，意為"彈性布局"蚂且，用來為盒狀模型提供最大的靈活性纹安。
Flex布局主要思想是：讓容器有能力讓其子項(xiàng)目能夠改變其寬度陆淀、高度（甚至是順序）考余，以最佳方式填充可用空間
基本概念
采用flex布局的元素，稱為flex容器倔约，所有子元素稱為容器的成員秃殉，稱為flex項(xiàng)目（flex item）,簡(jiǎn)稱為"項(xiàng)目".
容器的屬性
- flexDirection
- flexWrap
- justifyContent
- alignItems
項(xiàng)目屬性
- flex
- alignSelf
flexDirection 屬性
flexDirection 屬性決定了主軸的方向有四個(gè)屬性值：
- row:主軸為水平方向，起點(diǎn)在左端浸剩，方向從左到右
- row-reverse: 主軸方向水平從右到左
- column(默認(rèn)值) ：主軸垂直方向钾军，從上到下
- column-reverse:主軸方向垂直從下到上
flexWrap屬性
flexWrap屬性定義如果項(xiàng)目一行排不下如何換行。
- nowrap:不換行（默認(rèn)）
- wrap:換行
justifyContent屬性
定義了項(xiàng)目在主軸上的對(duì)齊方式
- flex-start:在主軸的開始方向開始排列（默認(rèn)）有點(diǎn)像Android的RelativeLayout的alignParen屬性
- flex-end:在主軸方向的結(jié)束方向開始排列
- conter:居中
- space-between：兩端對(duì)齊绢要，項(xiàng)目之間的間隔相等吏恭，（和Android的weight類似）
- space-around: 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等，相當(dāng)于margin在Android的margin相等
alignItems屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊
- flex-start:交叉軸起點(diǎn)對(duì)齊
- flex-end:交叉軸終點(diǎn)對(duì)齊
- center:交叉軸居中對(duì)齊
- stretch(默認(rèn)值)：如果項(xiàng)目未設(shè)置高度或設(shè)為auto重罪，將占滿整個(gè)容器的高度
-
baseline:項(xiàng)目的第一行文字的基準(zhǔn)線對(duì)齊
2.png
flex 屬性
在組件樣式中使用flex可以使其在可利用的空間中動(dòng)態(tài)地?cái)U(kuò)張或收縮樱哼。一般而言我們會(huì)使用flex:1來指定某個(gè)組件擴(kuò)張以撐滿所有剩余的空間。如果有多個(gè)并列的子組件使用了flex:1剿配，則這些子組件會(huì)平分父容器中剩余的空間搅幅。如果這些并列的子組件的flex值不一樣，則誰(shuí)的值更大呼胚，誰(shuí)占據(jù)剩余空間的比例就更大（即占據(jù)剩余空間的比等于并列組件間flex值的比）
flex-grow屬性
flex-grow屬性定義項(xiàng)目的放大比例茄唐，默認(rèn)為0，即如果存在剩余空間蝇更，也不放大,如果所有項(xiàng)目的flex-grow屬性都為1沪编，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2年扩，其他項(xiàng)目都為1蚁廓，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
alignSelf屬性
alignSelf屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式厨幻，可覆蓋align-items屬性相嵌。默認(rèn)值為auto，表示繼承父元素的align-items屬性况脆，如果沒有父元素平绩，則等同于stretch。
該屬性可能取6個(gè)值漠另，除了auto，其他都與align-items屬性完全一致跃赚。
如果有多個(gè)樣式笆搓，樣式會(huì)覆蓋性湿，
<Text style={[styles.textStyle,{width:70,backgroundColor:'green'}]}>
文本1
</Text>
