1. 什么是Flexbox攒射？
簡(jiǎn)單來(lái)說(shuō)Flexbox是屬于web前端領(lǐng)域CSS的一種布局方案醋旦，是2009年W3C提出了一種新的布局方案，可以簡(jiǎn)便匆篓、完整浑度、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。你可以簡(jiǎn)單的理解為Flexbox是CSS領(lǐng)域類似Android中 LinearLayout的一種布局鸦概，但是要比 LinearLayout要強(qiáng)大的多。
2. ReactNative中的Flexbox
總所周知甩骏，移動(dòng)端在使用和操作習(xí)慣與PC端有著截然的不同窗市，這就注定了它和WEB端在布局方式以及復(fù)雜度方面有著巨大的差別。所以在ReactNative中饮笛，官方對(duì)Flexbox做了一些閹割咨察，以用來(lái)適應(yīng)移動(dòng)端的布局方式。
關(guān)于完整的Flexbox布局教程福青，可以參考阮一峰的Flex 布局教程：語(yǔ)法篇摄狱。
3. ReactNative中Flexbox常用的幾個(gè)屬性
- 容器屬性
flexDirection、justifyContent无午、alignItems媒役、flexWrap - 元素屬性
alignSelf、flex宪迟、position
本文只介紹重點(diǎn)的幾個(gè)屬性酣衷，其他類似marginLeft、padding等次泽，無(wú)論你之前是做網(wǎng)頁(yè)開發(fā)穿仪，還是做原生開發(fā)，應(yīng)該都非常熟悉意荤，所以這里不做過(guò)多說(shuō)明啊片，大家稍微嘗試看一下效果就知道了。另外玖像，更多屬性支持請(qǐng)查看官方文檔紫谷。
在我們介紹這些屬性之前，有一個(gè)概念御铃，需要跟大家講解下碴里，那就是主軸和交叉軸。上面的多數(shù)屬性和這個(gè)概念有直接關(guān)系上真，起初學(xué)習(xí)Flexbox可能比較困惑咬腋，有可能就是沒理解清楚這個(gè)概念。
主軸和交叉軸是由flexDirection這個(gè)屬性來(lái)決定的睡互，讓我們首先來(lái)看下flexDirection
-
flexDirection：這個(gè)屬性決定了子View排列的方向根竿，類似Android中LinearLayout的orientation屬性陵像，它有兩個(gè)值：
row：橫向排列，主軸為水平方向寇壳，交叉軸為垂直方向醒颖；
column：豎直排列，主軸為垂直方向壳炎，交叉軸為水平方向泞歉。
其中，默認(rèn)值是column匿辩。
- justifyContent：設(shè)置子布局在主軸方向位置
- alignItems：設(shè)置子布局在交叉軸方向位置
- flexWrap：水平或垂直布局時(shí)：如果子View放不下腰耙，則自動(dòng)換行, 默認(rèn)為'nowrap'(不換行)
- alignSelf：設(shè)置子布局在交叉軸方向位置
- flex：權(quán)重，類似Android中weight
-
position：定位模式铲球，分為absolute和relative兩種
absolute：絕對(duì)定位挺庞，相對(duì)于原點(diǎn)（左上角）<Text style={{ fontSize: 20, textAlign: 'center', backgroundColor: '#0000FF', color: '#FFFFFF', position: 'absolute', left: 100, top: 100 }}> B </Text>
relative：相對(duì)定位，相對(duì)于當(dāng)前位置
<Text style={{
fontSize: 20,
textAlign: 'center',
backgroundColor: '#0000FF',
color: '#FFFFFF',
position: 'relative',
left: 100,
top: 100
}}>
B
</Text>
