如何将 Flexbox 网格中的最后一行与'justify-content: space- Between”对齐？

弹性盒：如何将最后一行与网格对齐

在具有如下容器的弹性盒布局中：

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

目标是将最后一行中的项目与其他项目对齐。使用 justify-content: space- Between;由于网格宽度和高度可调，这一点仍然至关重要。

目前，：

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

右下角的项目出现不对齐。

要解决此问题：

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

添加 ::after 来自动填充空间，无需进行 HTML 调整。

以上是如何将 Flexbox 网格中的最后一行与'justify-content: space- Between”对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！