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

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

👽概论

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

👽Flex布局

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

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

👻 解决方案

对于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兼容性参考：

数据来源：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;
}

👽 结语

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