Bagaimana Menjajarkan Baris Terakhir dalam Susun Atur Flexbox?

Menjajarkan Baris Terakhir di Kiri dalam Flexbox

Flexbox ialah alat reka letak yang berkuasa yang membolehkan susunan kandungan yang serba boleh. Walau bagaimanapun, apabila berurusan dengan kotak lentur berbilang talian, mengekalkan penjajaran boleh menjadi mencabar. Artikel ini menangani isu penjajaran kiri baris/baris terakhir dalam flexbox, memastikan reka letak seperti grid yang konsisten.

Isu timbul apabila baris terakhir tidak mengandungi bilangan elemen yang sama seperti baris lain, menyebabkan pemusatan dan kesan grid. Untuk menangani perkara ini, penyelesaian menggunakan elemen pengisian ruang kosong yang diletakkan secara strategik dicadangkan.

Dalam HTML, cipta tiga div kosong dengan kelas "mengisi-kosong-ruang-kanak-kanak." Elemen ini harus mempunyai lebar yang sama dengan lebar elemen kanak-kanak dan ketinggian 0. Elemen ini memainkan peranan penting dalam menjajarkan baris terakhir ke kiri.

Bekas kotak flex harus mempunyai sifat berikut:

• paparan: flex
• flex-wrap: wrap
• justify-content: space-round

Bergantung pada bilangan elemen dalam baris terakhir, elemen pengisi ruang kosong runtuh dalam baris baharu, kekal tidak kelihatan, memastikan baris terakhir kekal sejajar ke kiri.

Berikut ialah contoh:

<code class="html"><div class="container">
  <div class="item"></div>
  <div class="item"></div>
  ...
  <div class="item"></div>
  <div class="filling-empty-space-childs"></div>
  <div class="filling-empty-space-childs"></div>
  <div class="filling-empty-space-childs"></div>
</div></code>

<code class="css">.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.item {
  width: 130px;
  height: 180px;
  background: red;
  margin: 0 1% 24px;
}

.filling-empty-space-childs {
  width: 130px;
  height: 0;
}</code>

Dengan melaksanakan teknik ini, baris/baris terakhir akan dijajar ke kiri, mengekalkan kesan grid yang diingini walaupun apabila ia mengandungi bilangan elemen yang berbeza daripada baris lain.

Atas ialah kandungan terperinci Bagaimana Menjajarkan Baris Terakhir dalam Susun Atur Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!