React Native - Flex布局

React Native - Flex布局

Flex布局概述

概念：弹性盒子布局

历史:性盒模型,该布局方案由W3C于2009年提出，此后,Flex方案便历经v2009,v2011,v2012,v2014,v2015,v2016等版本,目前方案是2016年5月26日起草的

优势:Flex布局使得子项目能够”弹性”的改变其高宽,自由填充容器剩余空间,以适应容器变大,或者压缩子项目自身以适应容器変小;同时还可以方便的调节子项目方向和顺序。fex常用于高宽需要自适应,或子项目大小成比例或水平垂直对齐等场景,几乎可以胜任99%的布局场景,都可以通过样式属性来解决。

Flex布局与Android五大布局对比

优势:不用重写复杂的布局标签,父容器属性可以传递给子控件,子控件也可根需求进行相应更改,布局非常灵活

flex属性

当布局当前层级只有一个元素时设置flex:1相当于
android: layout_width=match_parent
android: layout_height="wrap_content
相当于android:layout_weight="1"属性（可理解成权重）

flexDirection属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-direction	描述
column(默认)	竖向排列，起点在上沿
column-reverse	竖向排列，起点在下沿
row	横向排列，起点在左端
row-reverse	横向排列，起点在右端

备注：主轴交叉轴是有方向的，方向规定者起始方向

justifyContent属性

justify-content属性定义了项目在主轴上的对齐方式。

这里假设是垂直排列（由flexDirection决定）

justifyContent	描述
flex-start(默认)	集中在最上方
center	整体竖向居中
flex-end	集中在最下方
space-around	均匀分布
space-between	均匀铺满

alignItems属性

alignItems:指交叉轴的位置

alignItems	描述
flex-start(默认)	集中在最左边
center	整体横向居中
flex-end	集中在最右边
stretch	水平撑满，子组件不能设置固定的width

备注：RN里alignItems属性默认是flex-start，其他地方好像是默认stretch