Bagaimanakah Saya Boleh Menjajarkan Baris Terakhir Grid Flexbox Secara Sekata dengan `justify-content: space-between`?

Flex-Box: Menjajarkan Baris Terakhir ke Grid

Dalam susun atur kotak lentur, menjajarkan item dalam baris terakhir dengan yang lain boleh memberikan cabaran. Dengan justify-content: space-between;, melaraskan saiz grid boleh membuang penjajaran.

Untuk menyelesaikan isu ini, penyelesaian yang mudah dan elegan telah muncul:

Menggunakan ::after

Tambahkan ::selepas unsur pseudo yang mengisi auto yang selebihnya ruang:

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

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

Cara Ia Berfungsi:

Unsur pseudo ::after mencipta elemen maya yang mengisi ruang kosong dalam grid. Dengan memberikannya flex: auto;, ia melaraskan secara automatik agar muat. Oleh itu, item baris terakhir dijajarkan dengan lancar tanpa mengira saiz grid dan tanpa mengubah suai struktur HTML.

Untuk demonstrasi langsung, rujuk contoh CodePen yang disediakan di sini: http://codepen.io/DanAndreasson/pen /ZQXLXj

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Baris Terakhir Grid Flexbox Secara Sekata dengan `justify-content: space-between`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!