React Native——flex布局

flex布局基本概念
flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。采用flex布局的元素，称为flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称”项目”。

容器默认存在两根轴：主轴（main axis）和交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性：
flexDirection：布局方向，决定主轴的方向，默认值是column，即纵向布局
row |横向布局，主轴为水平方向

column|纵向布局，主轴为竖直方向

justifyContent：主轴方向对齐方式，默认值是flex-start，即主轴的开端

flex-start：主轴开端

center：主轴的中间位置

flex-end：主轴的末端位置

space-between：项目与项目之间插入相同距离的空隙

space-around：项目两旁插入相同距离的空隙

alignItems：交叉轴方向对齐方式，默认值flex-start，即交叉轴开端

flex-start：交叉轴开端

center：交叉轴的中间位置

flex-end：交叉轴的末端位置

flexWrap：包含内容，默认值是nowrap，不包裹所有内容

nowrap：不包裹内容

wrap：包裹内容

flex：布局权重
1:0 flex=0的项目占用空间仅为内容所需空间，flex=1的项目会占据其余所有空间

1：1