1. 介绍
- Flexble Box的缩写，弹性盒子布局，主流的浏览器都支持；
- flexbox布局是伸缩器（container，即容器）和伸缩项目（item，即子控件）组成；
- flexbox布局的主体思想是元素可以改变大小以适应可用空间，Flex元素可以让布局根据浏览器的大小变化进行自动伸缩；
- 伸缩容器主要由主轴和次轴组成，主轴可以是水平轴（默认）亦可是垂直轴，那么次轴就是垂直轴或水平轴；
2. 主要属性
- 伸缩容器的属性（即容器自身的属性）
- display
- flex：块级伸缩容器
- inline-flex：行内级伸缩容器
- flex-direction：指定主轴的方向
- row：从左到右（默认值）
- row-reverse：从右到左
- column：从上到下
- column-reverse
- flex-wrap：伸缩容器在主轴线方向空间不足的情况下，是否换行以及该如何换行
- nowrap：不换行（默认值）
- wrap：换行（如果主轴方向为row时，则换行顺序为自上而下）
- wrap-reverse：反向换行（如果主轴方向为row时，则换行顺序为自下而上）
- flex-flow：是flex-direction和flex-wrap的缩写版本，它同时定义了伸缩容器的主轴和换行方式（即2和3的集合体，其默认值为row nowrap）
- justify-content：沿主轴线方向的对齐方式
- flex-start：起始位置（默认值）
- flex-end：结束位置
- center：居中
- space-between：平均分配到主轴线上
- space-around：平均分配到主轴线上，并且子控件两边各留出相同的距离
- align-items：沿次轴方向的对齐方式
- flex-start：起始位置（默认值）
- flex-end：结束位置
- center：居中
- baseline：基准线对齐
- stretch：拉伸
- align-content：换行后在次轴方向上的对齐方式
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch：默认值
- display
- 伸缩项目的属性（即容器中子控件的属性）
- oeder：控件排列顺序，数值越小越靠前（可以有负数，默认值为0）
- flex-grow：控件的放大比例（默认值为0，即表示如果存在剩余空间也不放大）
- flex-shrink：控件的收缩比例（默认值为1）
- flex-basis：设置控件的基准（其值为：整数px，如200px；默认值为auto）
- flex：是flex-grow flex-shrink flex-basis这三个属性的缩写，其中第二个和第三个参数为可选项（默认值为 0 1 auto）
- align-self：控件自身在次轴上的对齐方式
- auto：默认值
- flex-start：
- flex-end：
- center：
- baseline：
- stretch：拉伸，只有在宽（次轴为水平方向）高（次轴为垂直方向）没有设置的情况下，才会有效
- React Native目前主要支持flexbox的6个属性：
- alignItems：沿次轴方向的对齐方式（注：无baseline值，故其值为：flex-start | flex-end | center | stretch）
- alignSelf：控件自身在次轴上的对齐方式（注：同样没有baseline值，故：auto | flex-start | flex-end | center | stretch）
- flex：是flex-grow flex-shrink flex-basis这三个属性的缩写，其中第二个和第三个参数为可选项（默认值为 0 1 auto）
- flexDirection：指定主轴的方向（注：在这种情况下默认值为column）
- flexWrap：
- justifyContent：
