Published on

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

Authors
  • avatar
    Name
    老麦

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

截屏2023-02-21 15.18.31

页面用的是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) {
}

结语:

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

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