秒懂flex弹性布局

注意：由于作者没有时间去举例描述，因此，阅读本文需要有一定基础，文中所列的值只是常用的，完整的取值需要参考相关文档。

以前在web上布局都用浮动和定位；

但它们的布局功能不够强大；

在现代的标准浏览器上，更多的人开始使用弹性布局技术和网格布局技术；

尤其在跨平台移动应用开发中，比如react native、union app等，都要求或者推荐弹性布局技术；

因此，弹性布局技术很重要。

－－－－－－－－－－－－－－－－－－－－－－－－－－

弹性布局技术是一种一维布局技术，所谓一维布局技术指它重点关注一个维度上的布局控制。

网格布局技术是一种二维布局技术，它可以同时控制两个维度：行和列。以后有机会再讨论它。

学习弹性布局技术首先要弄懂两个轴：主轴和交叉轴。

主轴：这也就是上面讲的一维，注意千万不要将它理解为横轴或者水平轴，它可能是横向的，也可能是纵向的，因此本文称它为主轴，不称它为横轴或者X轴。可以将主轴理解为开车行驶在公路上，行进的方向就是主轴。

交叉轴：指与上面的主轴垂直交叉的那条轴，千万不要理解为是纵轴，它也可能是横向的。可理解为开车行驶时到一个路口时，横向的那条道路即为交叉轴。

弹性布局的基本布局流程：

1、先在容器元素上（比如某个div）设置CSS样式：display:flex样式属性，此容器元素即成为弹性布局容器；

2、上面的容器元素里面的子元素（注意是直接子元素，不是指里面所有的后代元素）即成为了弹性布局项，可以在项上面设置flex开头的一些样式属性，进一步控制其效果；

－－－－－－－－－－－－－－－－－－－－－－－－－－

下面重点讲一下弹性布局相关的样式属性：

一、设置在容器元素上的：

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上的登录页面，上面就用户名和密码几个文本框，下面页脚往往就一个版权说明字样。此时最佳布局方案如下：

<div style="display:flex; height:400px; flex-direction:column;">

        <input placeholder="请填写用户名" />

        <input placeholder="请填写密码" />

        <div style="margin-top:auto;">2019 版权所有</div>

       <div>电话：111111</div>

</div>

注意，此布局的关键就是margin-top:auto;它实现了将它自己及后面的元素推到容器最下面的效果。

2、页脚上面的内容会很多，为一个可滚动容器的时候，推荐的布局如下：

<div style="display:flex; height:400px; flex-direction:column;">

        <div style="flex:1 1 0; over-flow:auto;">

              这里内容非常多。

       </div>

        <div>2019 版权所有</div>

       <div>电话：111111</div>

</div>

这个布局的关键就是flex:1 1 0;它表示这个内容div可扩展可收缩，反正会撑满除下面页脚内容外的所有空间。