FlexBox - react

FlexBox被称为弹性盒模型，flexbox布局旨在提供一个更加有效的方式制定、调整分布在项目中的布局，即便这个布局是未知或是动态的，主要思想是让容器有能力让其子项目改变其宽度、高度，以此来实现布局更好的适应各种屏幕。
flexbox基础概念包括：
Main Axis:主轴，伸缩容器的主轴，容器一般沿着这条轴线进行布局。
Main Start:主轴开始的位置。
Main End:主轴结束的位置。
Cross Axis:侧轴，垂直于主轴的轴被称为侧轴，侧轴一般不发生变化
Cross Start:侧轴开始的位置。
Cross End:侧轴结束的位置。
Flex Container:伸缩的容器。
Flex Item:伸缩的项目。
Main Size:沿主轴方向的长度。
Cross Size:沿侧轴方向的长度。（贴图：更清晰的认识）

如图可以了解到整个布局类似我们使用的LinearLayout布局，其中的Flex Container和Flex Item就好比属性gravity和layout_gravity，这样比较下来我们就很容易上手了。
一、下面介绍 Container的属性
1、flexDirection 属性(row,column)：定义子元素沿轴排列的方式
决定主轴的方向,默认为column（即main axis为纵轴）由上到下排列 则row主轴（main axis为横轴）由左到右排列 column-reverse纵轴由下到上排列，row-reverse横轴由右向左
2、flexWrap属性定义子元素在父容器中是否多行显示默认为nowrap
nowrap：只允许一行显示
wrap:一行不够时自动换行排列
3、justifyContent属性 指元素在主轴线上的对齐方式
默认flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐，元素之间间隔相等
space-around:每个元素两侧间隔相等（类似于marginLeft和marginRight相同）
4、alignItems 定义了子元素在侧轴的对齐方式
默认值 flex-start :侧轴起点对齐
flex-end:侧轴终点对齐
center:侧轴中点对齐
stretch:未设置高度的时候，会填充满容器整个高度
二、 Item属性
1、flex:即子元素占剩余空间的比例（类似于权重）
flex后跟数字1 2 3 4
示例：

结果：

2、alignSelf
定义子元素在容器中的对齐方式
默认值 auto 继承父元素的alignItem ,父元素没有这个属性则等同于stretch
flex-start ：顶部
flex-end ：底部
center：居中
stretch：填充高度
效果：

FlexBox 属性主要用到的两个可以满足大部分的布局视图，属于基础性的内容，简单列出也算做事学习笔记，有遗漏处，还望指出！