【css】flex布局order的妙用
背景：
在详情页(下图)中，从上到下排不着很多模块(黄色区域)。现有需求需要根据入口租售类型，将“直租房源”和“直售房源”模块按照顺序排序展示。
如果是从出售列表进来的需要将“直售房源”模块放在“直租房源”模块前面。
如果是从出租列表进来的需要将“直租房源”模块放在“直售房源”模块前面。
image.png
项目结构：node项目-做中间层承载模板(ssr)并做接口转发，前端项目-产出静态资源；
方案：
需求抽象下就是根据不同来源模块按照一定顺序展示；
首先不同的来源我们在详情页的链接上增加from字段来进行区分；
接下来有以下方案来实现剩下的部分：
- node下发请求url上的from字段，动态拼接模板之后返回客户端展示；
- 通过js截取页面的form字段，并根据映射关系移动dom来实现；
- node下发请求url上的from字段，之后通过css来实现顺序的展示。
第一种，方案node层做得工作比较多，讲道理这种页面展示相关的放到node不太合适，改样式相关的需求还得部服务，pass；
第二种，js截取from没毛病，但等页面绘制完毕在移动dom触发重回重排，甚至和还会晃一下，用户体验太差，pass；
第三种，node获取到from之后在模板上添加class返回客户端，css根据class进行渲染，各司其职没毛病，就它了；
通过css来更改顺序，顺其自然想到flex的order属性，顾名思义 通过设置该属性可以控制顺序；
搞起：
dom结构大概长这样：
<div class="container">
<div id="red">出租</div>
...
<div id="green">出售</div>
.....
<div class="footer">底部模块</div>
</div>
image.png
现在通过标签类型来改变容器的class，来间接改变元素的order，比如现在是从出售列表进来的，那么就需要绿色模块在红色上面。我们通过给容器添加type1这个class来设置green 1， red 2；然后看看效果
// type1等class为了直接一点，真正写代码时可别这样，会被打，手动狗头；
.container{
display:flex;
flex-direction: column; // 设置方向
&.type1{
#red{ order:2 }
#green{ order:1 }
}
&.type2{
...
}
}
image.png
emmm，不妙不妙，底部模块咋上天了。。。突然回想起来不设置order的元素默认是0，所以按照顺序0就在最前面了。这样的话需要把剩下的模块css都改一遍，达咩绝对达咩！！
image.png
既然默认是0，那我把order 改成负数是不是就ok啦？trytry
&.type1{
#red{ order:-1 }
#green{ order:-2 }
}
image.png
完美~ 非常nice~ 打包上线~👏
总结：
order值为number类型，按照设定的轴方向(flex-direction)从小到大排序。可为负数，不设置默认是零；相同值按照dom顺序展示；
兼容性与flex一致
扩展：
除了这种场景，主站经常会有”5插1“的需求，就是每5条帖子插一条广告，不考虑兼容性也可可以使用order来实现；或者活动宣传页，不同的活动只涉及模块顺序的变动，order也同样适用~
简书的首页广告也可以使用这种方式调整顺序
