Bagaimana untuk Menjajarkan Baris Terakhir dalam Grid Flexbox dengan `justify-content: space-antara`?

Flex-box: Cara Menjajarkan Baris Terakhir ke Grid

Dalam susun atur kotak lentur dengan bekas seperti:

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

Matlamatnya adalah untuk menjajarkan item dalam baris terakhir agar setara dengan orang lain. Menggunakan justify-content: ruang-antara; kekal penting kerana lebar dan ketinggian grid boleh laras.

Pada masa ini, dengan:

.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;
}

Item di bahagian bawah sebelah kanan kelihatan di luar penjajaran.

Untuk membetulkannya:

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

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

A ::selepas ditambah untuk mengisi ruang secara automatik, menghapuskan keperluan untuk HTML pelarasan.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Baris Terakhir dalam Grid Flexbox dengan `justify-content: space-antara`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!