解决友链页面flex布局产生的问题

其实我发现这个问题已经有一段时间了，当时也想到了这种情况用 grid 布局更合理，但我那时感觉其实问题也并不大，就让它一直晾在那里了。现在有点时间折腾，就尝试处理一下这个并不那么重要的问题。

页面用的是 flex 布局，

.links-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

做了自适应，手机端为一行一列，平板为一行两列，PC 端为一行三列。这时在 PC 端上就会出现如上图所示的问题，当最后一行只有两个元素时，因为justify-content: space-between;的关系，行内的两个元素就会以两端对齐的方式出现。

暂时我想到的解决办法：

一、将两端对齐去掉，然后将元素的宽度调整一下；

二、通过伪类的方法将最后一个元素的位置调整；

其中方法一比较常规，对没有硬性要求的情况下使用就很简单，三列就将元素的宽度设置成 33%，如果元素设置了向左向右的外边距就用calc(33.3333%-外边距)定义元素宽度。

原本不会有方法二，但是我在想，如果我一定要使用justify-content: space-between;来实现两端对齐呢？那么有没有什么办法呢？在 MDN 上查阅相关文档，最后用下列样式去调整最后一个元素的位置成功。

.links:last-child:nth-child(3n + 2) {
  margin-right: calc(33.3333% + 16px);
}

MDN 文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

思考：如果我一行上有四列、五列、六列呢？

拿一行四列举例，当最后一行有一个或正好四个元素时，用justify-content: space-between;来实现两端对齐都不会有什么问题，但当最后一行上的元素是两个或者三个的时候呢？

为了更加直接地演示，我在 CodePen 上新建了一个档案作为演示。

flex 布局——两端对齐 2

依此类推，当一行五列时只要添加最后一个元素的判断即可。

/* 当最后一行为二个个元素时 */
.li1:last-child:nth-child(5n + 2) {
}
/* 当最后一行为三个个元素时 */
.li1:last-child:nth-child(5n + 3) {
}
/* 当最后一行为四个个元素时 */
.li1:last-child:nth-child(5n + 4) {
}

结语：

我使用方法一去修改了我友链这个页面的布局样式。明明可以简单地完成，最终我却花了不少的时间去看文档、思考、实践、记笔记，一步一步地去吸收新的知识，这个过程还是让我很愉悦的。

这些知识很基础，对于我来说就是从零到一的概念，哪怕是最简单的，我不会的话还是不会。现在掌握了，记起来。夜兄让我找点其他爱好，我细想一下真的很有必要，我现在游戏不爱玩了，烟戒了，酒不太敢喝了，又不打牌，就连茶庄最近也很少过去坐了。这……暂时将折腾学习看作是爱好吧！