Bagaimanakah Saya Boleh Menjajarkan Baris Terakhir Item dalam Kotak Flex dengan `justify-content: space-between;`?

Menjajarkan Item Baris Terakhir dengan Flex-box

Reka letak Flex-box terkenal dengan fleksibilitinya dalam menyusun kandungan. Dalam senario di mana anda mempunyai bekas kotak flex dengan item yang disusun menggunakan flex-flow: balut baris; dan justify-content: space-between;, anda mungkin menghadapi situasi di mana anda mahu item dalam baris terakhir diselaraskan dengan yang lain.

Mencapai Penjajaran dengan justify-content: space-between ;

Untuk mencapai penjajaran ini sambil mengekalkan penggunaan justify-content: ruang-antara; untuk dimensi grid boleh laras, anda boleh menggunakan kaedah berikut:

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

Kod CSS ini menambah elemen halimunan (::after) pada bekas. Elemen ini mengambil baki ruang dalam bekas, menjajarkan item dalam baris terakhir dengan yang lain dengan berkesan sambil mengekalkan pengedaran yang diingini untuk baris lain.

Contoh

Pertimbangkan contoh berikut di mana item baris terakhir perlu diselaraskan di bahagian "tengah lajur":

paparan: lentur;
aliran lentur: balut baris;
justify-kandungan: ruang-antara;
}

.grid ::selepas {
kandungan: "";
lentur: auto;
}

.item {
lebar: 100px;
tinggi: 100px;
warna latar belakang: #ccc;
}

Kod ini mencipta bekas kotak fleksibel dengan item dibalut pada berbilang barisan. Elemen ::after memastikan item baris terakhir diselaraskan dengan yang lain, mengekalkan pengedaran baris lain walaupun lebar bekas berbeza-beza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Baris Terakhir Item dalam Kotak Flex dengan `justify-content: space-between;`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!