React Native - Flex布局
Flex布局概述
概念：彈性盒子布局
歷史:性盒模型,該布局方案由W3C于2009年提出，此后,Flex方案便歷經(jīng)v2009,v2011,v2012,v2014,v2015,v2016等版本,目前方案是2016年5月26日起草的
優(yōu)勢(shì):Flex布局使得子項(xiàng)目能夠”彈性”的改變其高寬,自由填充容器剩余空間,以適應(yīng)容器變大,或者壓縮子項(xiàng)目自身以適應(yīng)容器変小;同時(shí)還可以方便的調(diào)節(jié)子項(xiàng)目方向和順序。fex常用于高寬需要自適應(yīng),或子項(xiàng)目大小成比例或水平垂直對(duì)齊等場(chǎng)景,幾乎可以勝任99%的布局場(chǎng)景,都可以通過(guò)樣式屬性來(lái)解決。
Flex布局與Android五大布局對(duì)比
優(yōu)勢(shì):不用重寫(xiě)復(fù)雜的布局標(biāo)簽,父容器屬性可以傳遞給子控件,子控件也可根需求進(jìn)行相應(yīng)更改,布局非常靈活
flex屬性
當(dāng)布局當(dāng)前層級(jí)只有一個(gè)元素時(shí)設(shè)置flex:1相當(dāng)于
android: layout_width=match_parent
android: layout_height="wrap_content
相當(dāng)于android:layout_weight="1"屬性（可理解成權(quán)重）
flexDirection屬性
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。
| flex-direction | 描述 |
|---|---|
| column(默認(rèn)) | 豎向排列，起點(diǎn)在上沿 |
| column-reverse | 豎向排列，起點(diǎn)在下沿 |
| row | 橫向排列，起點(diǎn)在左端 |
| row-reverse | 橫向排列，起點(diǎn)在右端 |
備注：主軸交叉軸是有方向的，方向規(guī)定者起始方向
justifyContent屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
這里假設(shè)是垂直排列（由flexDirection決定）
| justifyContent | 描述 |
|---|---|
| flex-start(默認(rèn)) | 集中在最上方 |
| center | 整體豎向居中 |
| flex-end | 集中在最下方 |
| space-around | 均勻分布 |
| space-between | 均勻鋪滿(mǎn) |
alignItems屬性
alignItems:指交叉軸的位置
| alignItems | 描述 |
|---|---|
| flex-start(默認(rèn)) | 集中在最左邊 |
| center | 整體橫向居中 |
| flex-end | 集中在最右邊 |
| stretch | 水平撐滿(mǎn)，子組件不能設(shè)置固定的width |
備注：RN里alignItems屬性默認(rèn)是flex-start，其他地方好像是默認(rèn)stretch
