weex默认的flex布局_用好 order 和 flex 可以让 flex 弹性布局在响应式下变得更灵活...

上一篇的推文内容是跟 flex 相关的，这次也是，感觉自己好像最近跟 flex 杠上了，之前甚至还想着写一系列跟 flex 相关的内容，写着写着，感觉自己太啰嗦了，于是最后放弃，精力有限，还是在公众号中简单写一点，比较轻松。

回正题，这次内容很简单，就是结合 flex 相关属性在响应式布局中的页面效果，效果是这样的：

设定的情况有三个区间：

• ＞750px 时的页面布局；

• ≤ 750px 且 ≥375px 时的页面布局；

• ＜375px 时的页面布局；

考虑使用 flex 弹性布局的方式来实现，所以，整个 HTML 结构我也尽量简单点了。

class=  class=  class=  class=  class=  class=

为了便于后面的宽度计算，这里就先把 body 的 margin 设为 0，同时把子元素都改变了盒模型计算方式。

body {  margin: 0;}.layer {  box-sizing: border-box;  padding: 10px;}

在折腾里面的五个元素之前，先把外层元素 .wrap 设置一下。

.wrap {  display: flex;  /* 让 flex 元素可换行 */  flex-wrap: wrap;}

display 值为 flex 后，子元素就转为了 flex 元素，每个子元素都会有默认的 flex 属性，同时，.wrap 元素自身作为 flex 容器，也具备了一些默认的 flex 特性。所以，这里增加了 flex-wrap 可以让 flex 元素在一行放不下的时候可让下一个元素换行显示；

现在这个 .wrap 元素是没有设定高度的，如果设定了一个高度比所有子元素之和还要大，比如 100vh，那么就还需要再修改一个 align-content 属性，否则每个 flex 元素的高度会收到影响。

如有兴趣的话，可以试一下下面两段代码的影响：

.wrap {    display: flex;    flex-wrap: wrap;    align-content: flex-start;    height: 100vh;}

.wrap {    display: flex;    flex-wrap: wrap;    height: 100vh;}

这两段的区别是当 flex 容器有高度时，flex 元素内容可能会因为 align-content 的关系而拉伸显示。

.header,.footer {  flex: 100%;  background-color: #f92672;}.footer {  order: 10;  background-color: #f3b44a;}.main {  flex: 50%;  order: 4;  background-color: #009aff;}.sider {  flex: 175px;  order: 3;  background-color: #458746;}.extra {  flex: 200px;  order: 5;  background-color: #ae81ff;}

五个元素，为了现成区别，设定了五个背景色。抛开背景色不谈，每个元素的关键就是 flex 和 order 这两个属性了。

flex 属性如果只有一个值，且是有单位的，那么改变的是 flex-basis 的值，flex-grow 和 flex-shrink 这两个属性值则都为 1。所以，这里每个值设定的 flex 值就是为了更好地控制每个元素的宽度，以影响在不同宽度时，让 flex-wrap 作用起效。

order 属性可以控制每个 flex 元素的显示位置，数字越大，flex 元素的位置就越往后。目前看到的属性是：.header > .sider(3) > .main(4) > .extra(5) > .footer(10)。

所以，得到的结果就是这样了：

这个截图与前面的差异主要是 .main 的大小以及位置的控制。而控制大小和位置就需要利用 @media 媒体类型判断来做响应式处理了。

@media (max-width: 750px) {  .main {    flex: 100%;    order: 2;  }}@media (max-width: 350px) {  .main {    order: 1;  }}

简单点，还是继续简单点，通过修改 order 的值来改变 .main 的位置，通过设置 flex: 100%; 来让 .main 元素满屏显示。

是的，就这样，大概的所谓响应式下的 flex 布局就完成了，而具体这么运用就只有是“具体问题具体分析”了。对于 flex 弹性布局而言，不需要太过于苛刻要求每个像素的对齐布局，灵活点比较好。