一、设置在容器元素上的：
1、display:flex，以前经常用display:none来隐藏元素，而这里flex值的作用是将对应元素设置为弹性布局容器；
2、flex-direction，用于控制主轴的方向。在web上默认是row即横向，但在react native中默认是column即纵向；这个方向用于控制容器里面的直接子元素沿哪个方向排列；
3、flex-wrap，用于控制容器下面的直接子元素是否能够换行。默认是不换行的。换行的效果用得少。
4、flex-flow，它是用于一起简写flex-direction和flex-wrap的。由于换行用得少它也就用得少了。示例：flex-flow:column wrap，这个表示主轴是纵向并且允许换行。
5、justify-content，用于控制主轴方向上子元素的对齐。默认其值是flex-start即轴的开始，可以设置为center表示居中所有子元素，space-around表示沿主轴上平均分布（平均分布指元素间距离相等）子元素，space-between与space-around类似，只不过两头的不会有空白（即第一个子元素和最后一个子元素是紧挨容器边框的）；
6、align-items，用于控制子元素在交叉轴方向上的对齐方式，默认是stretch即撑满容器元素。可设置center、flex-start等；
7、align-content，用于控制当主轴上允许换行时，对行进行分布操作，其值与justify-content类似。因换行用得少，此属性也用得少。
二、设置在子元素上的：
1、flex-grow，用于控制当子元素数量不够占满主轴方向上的空间时，是否让子元素沿主轴方向扩展宽度（或者高度）。默认是不扩展的。其值是一个比例单位。如在某子元素上设置flex-grow:1后，则表示这个子元素会扩展以填充多余的空间，此时如果有另外的子元素也设置为了1，则这两个元素会平分多余的空间。
2、flex-shrink，类似上面，用于控制当子元素太多超出了容器空间后，是否收缩子元素；
3、flex-basis，用于控制上面扩展或者收缩时，子元素起始的尺寸；默认值是auto。此属性最不易理解，如有疑问可评论区询问。
4、flex，是上面三个值的缩写。形式为：flex:flex-grow flex-shrink flex-basis。 如flex:1 1 0，表示沿主轴方向扩展占满多余空间或者子元素太多时收缩空间，并且从0开始；
5、order，用于在不修改代码的情况下，调整子元素的显示顺序。用得少。
三、固定页脚效果的布局
因弹性布局在这种情况下很有技巧性，所以举例说明。
这里要分两种情况：
1.页脚上面的内容不考虑成为可滚动的容器的时候，比如app上的登录页面，上面就用户名和密码几个文本框，下面页脚往往就一个版权说明字样。此时最佳布局方案如下：
<input placeholder="请填写用户名" />
<input placeholder="请填写密码" />
<div style="margin-top:auto;">2019 版权所有</div>
<div>电话：111111</div>
注意，此布局的关键就是margin-top:auto;它实现了将它自己及后面的元素推到容器最下面的效果。
2、页脚上面的内容会很多，为一个可滚动容器的时候，推荐的布局如下：
<div style="flex:1 1 0; over-flow:auto;">
这里内容非常多。
</div>
<div>2019 版权所有</div>
<div>电话：111111</div>
display: flex;
/* 调整主轴的方向 row 水平方向为主轴 */
/* flex-direction: row; */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
/* 主轴的排列方式 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* space-bettween 两端对齐 剩余的空间 平均分配 */
/* justify-content: space-between; */
/* justify-content: space-evenly; */
/* justify-content: space-around; */
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
/* flex-flow: column wrap; */
/* flex-direction: column; */
/* justify-content: flex-end; */
/* justify-content: flex-end; */
/* 侧轴 */
/* align-items: center; */
/* align-items: flex-start; */
/* align-items: flex-end; */
justify-content: center;
/* align-items: center; */
/* align-items: baseline; */
align-items: stretch;