Bagaimanakah Saya Boleh Memastikan Jarak Sekata dalam Baris Terakhir Grid Flexbox dengan `justify-content: space-antara`?

Kotak lentur: Menjajarkan Baris Terakhir Grid

Dalam bekas kotak lentur dengan aliran lentur: balut baris; dan justify-content: space-between;, item baris terakhir mungkin tidak diselaraskan dengan betul. Artikel ini meneroka penyelesaian mudah untuk menjajarkan baris terakhir dengan baris lain, mengekalkan jarak yang diingini.

Penyelesaian itu menggunakan elemen pseudo ::selepas untuk mengisi auto ruang yang tinggal dalam bekas. Dengan memberikan flex: auto; kepada ::selepas, ia mengisi ruang kosong tanpa sebarang kandungan tambahan dalam HTML.

.grid {<br> paparan: flex;<br> flex-flow: row wrap;<br> justify-content: space-between;<br>}</p><p>.grid::after {<br> kandungan: "";<br> flex: auto;<br>}<br>

Pendekatan ini menyediakan penyelesaian yang bersih dan mudah, mengelakkan keperluan untuk menambah elemen yang tidak perlu pada kod HTML. Lihat demo langsung di http://codepen.io/DanAndreasson/pen/ZQXLXj untuk menyaksikan keberkesanannya.

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