【css】flex布局order的妙用

背景：

在详情页(下图)中，从上到下排不着很多模块(黄色区域)。现有需求需要根据入口租售类型，将“直租房源”和“直售房源”模块按照顺序排序展示。
如果是从出售列表进来的需要将“直售房源”模块放在“直租房源”模块前面。
如果是从出租列表进来的需要将“直租房源”模块放在“直售房源”模块前面。

image.png

项目结构：node项目-做中间层承载模板(ssr)并做接口转发，前端项目-产出静态资源；

方案：

需求抽象下就是根据不同来源模块按照一定顺序展示；
首先不同的来源我们在详情页的链接上增加from字段来进行区分；
接下来有以下方案来实现剩下的部分：

1. node下发请求url上的from字段，动态拼接模板之后返回客户端展示；
2. 通过js截取页面的form字段，并根据映射关系移动dom来实现；
3. 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也同样适用~

简书的首页广告也可以使用这种方式调整顺序