flex 布局解决最后一个布局问题

Posted 2023-05-02

参考技术A 当我们使用flex布局，可以自动换行的时候，经常会出现最后一个布局，没有自动跟在最后一个。因为我们设置flex的content属性是space-between。

解决办法：
通过给父级添加after伪类法，解决最后一排数量不够两端分布的情况。
原理：after伪类是在最后的时候，添加一个对应的css，这种三等分的情况，最后一个宽度要设置33%。给一个高度，占位。

flex 布局换行后最后一行左对齐

参考技术A 【方法一】：模拟 space-between 和间隙,也就是我们不使用 justify-content:space-between 声明在模拟两端对齐效果。中间的 gap 间隙我们使用 margin 进行控制。

【方法二】：根据个数最后一个元素动态 margin
由于每一列的数目都是固定的，因此，我们可以计算出不同个数列表应当多大的 margin 值才能保证完全左对齐。

例如，假设每行 4 个元素，结果最后一行只有 3 个元素，则最后一个元素的 margin-right 大小是“列表宽度+间隙大小”的话，那最后 3 个元素也是可以完美左对齐的。

然后，借助树结构伪类数量匹配技术（这篇文章“伪类匹配列表数目实现微信群头像 CSS 布局的技巧”中的布局技巧就是借助这种技术实现），我们可以知道最后一行有几个元素。

例如：

有时候，每一个 flex 子项的宽度都是不固定的，这个时候希望最后一行左对齐该如何实现呢？

由于此时间隙的大小不固定，对齐不严格，因此，我们可以直接让最后一行左对齐即可。具体方法有两个：
【方法一】：最后一项 margin-right:auto

【方法二】：创建伪元素并设置 flex:auto 或 flex:1