有趣且重要的css知识合集（5）flex布局的order用法

之前一直蛮少用这个属性的，不过最近用的很频繁，所以分享出来一下：

order讲解：

其实就是控制子组件在flex布局中的先后顺序，默认为0，可以为负，值越大布局越靠后，当值相等时，就根据写的先后顺序进行显示

用法实例1：

关于在键盘中合理排布的实例

例图：

uniapp + vue3微信小程序开发（7）键盘开发

用法实例2：

例图：

当有两个数组，一个数组为油站数组，另一个数组为广告数组，两个数组的长度均不一定，要求：每隔五个油站显示一个广告。

父组件显示：

通过动态style来控制order的显示，上层为油站数组，下层为广告数组

<OilItem v-for="item in oilList" :key="item.id" :item="item" :style="{order: item.order}"></OilItem>
<image class="oil-list-box-img" :src="item.picture" mode="widthFix" v-for="item in oilAds" :key="item.id" :style="{order: item.order}"></image>

解决思路：利用flex的order特性，在数组map时候进行修改order

 使最后油站order 为 0,1,2,3,4,6,7,8... ，计算公式为

 const oilOrder = Math.floor(index / 5) + index

使最后广告order为5,11,17...，计算公式为

const adsOrder = 5 + 6 * index

index皆为数组当前遍历的索引值，然后就可以实现合理排布。

如果你并不想每隔5个，你想隔10个，n个，那么也一样，公式如下：

const oilOrder = Math.floor(index / n) + index
const adsOrder = n + n * index