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