如何將 Flexbox 網格中的最後一行與「justify-content: space- Between」對齊？-css教學-PHP中文網

如何將 Flexbox 網格中的最後一行與「justify-content: space- Between」對齊？

Linda Hamilton

發布： 2024-12-27 03:31:10

原創

687 人瀏覽過

How to Align the Last Row in a Flexbox Grid with `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中文網其他相關文章！