阅读 204

【前端实践系列之六】老大难问题:类九宫格布局如何实现最后一行靠左?

这是我参与更文挑战的第7天,活动详情查看: 更文挑战 !

👽概论

相信所有的前端都会碰到这个问题:类九宫格的布局,如何实现最后一行单独靠左,其实行均分剩余空间?对于这个问题,我们大致分两类布局方法来讨论:Flex布局与Grid布局。

image.png

👽Flex布局

大多数人最常用的布局方法应该就是Flex布局了,我们此处只讨论justify-content: space-around;的情况(space-evenl也类似,space-between有点不一样,它在最后一行只有一个元素时的表现已经是靠左的)。

Tips:
justify-content: space-between;  /* 均匀排列,但首尾元素贴在父元素边上 */
justify-content: space-around;  /* 均匀排列,但每个元素两侧距离相等 */
justify-content: space-evenly;  /* 均匀排列,但每个元素之间的间隔相等 */
下图依次为三者的效果:
复制代码

image.png

👻 解决方案

对于flex布局来说,真心没有特别让人舒服的解决方案:

🙋 利用伪元素

这种只适用于最后一行只差一个元素的情况,只需要给父元素添加伪元素,并使其宽度与其余元素相等即可。

<div class="parent">
    <!--为演示方便,用了Vue语法-->
   <div class="child" v-for="index in 7" :key="index"></div>
</div>
复制代码
.parent {
  width: 410px;
  height: 410px;
  margin: 40px auto;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.parent::after {
  content:'',
  width:120px
}

.child {
  width: 120px;
  height: 120px;
  background-color: #d72323;
}
复制代码

🙋 动态追加占位元素

我们可以在子元素尾部继续追加有宽无高的占位元素,这种方法相对省心,但页面会多出部分节点(虽然并不会被看见)。

<div class="parent">
   <div class="child" v-for="index in 7" :key="index"></div>
   <!-- 此处7代表子元素总长度,3代表每行个数 -->
   <div class="child" v-for="index in 3- 7 % 3" :key="index"></div>
</div>
复制代码
···

.child {
  width: 120px;
  height: 120px;
  background-color: #d72323;
}
.child.no-height {
  height: 0;
}
···
复制代码

👽 Grid布局

Grid作为新时代的二维布局利器,处理这种问题其实是最佳解,但Grid布局的问题在于:兼容性。不过如果对兼容性要求不是特别严格的话,基本可以忽略不计。毕竟都2021年了,对吧。

以下是Grid兼容性参考:

image.png 数据来源:Can I Use。IE截图时没有包含在内,拒绝IE,从你我做起🤪。

🙋 解决方案

直接上代码:

<div class="parent">
   <div class="child" v-for="index in 7" :key="index"></div>
   <!-- 此处7代表子元素总长度,3代表每行个数 -->
   <div class="child" v-for="index in 3- 7 % 3" :key="index"></div>
</div>
复制代码

.parent {
  width: 410px;
  height: 410px;
  border: 1px solid #fff;
  margin: 0px auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

.child {
  width: 120px;
  height: 120px;
  background-color: #d72323;
}
复制代码

👽 结语

如果大家有更好更巧妙的方法,欢迎评论区交流~

文章分类
前端
文章标签