Bagaimana untuk Membuat Item Flex Menjangkau Lebar Baris Penuh Di Bawah Item Flex Lain?

Paksa Item Fleksibel Menjangkau Lebar Baris Penuh

Apabila bekerja dengan reka letak fleksibel, selalunya perlu meletakkan elemen secara sistematik. Dalam kes ini, matlamatnya ialah untuk menjajarkan dua elemen anak pertama pada baris yang sama sambil meletakkan elemen ketiga di bawah pada lebar penuh.

Penyelesaian Menggunakan Sifat Flex

Untuk mencapai ini, tetapkan sifat berikut pada dua elemen pertama:

flex-grow: 1;
flex-shrink: 1;

Ini bermakna ia akan mengembang dan mengecut untuk mengisi ruang yang ada sama.

Untuk elemen ketiga, gunakan sifat berikut:

flex-grow: 0;
flex-shrink: 0;
flex-basis: 100%;

Ini memastikan ia kekal saiz asal, tidak mengecut dan menempati lebar penuh bekas apabila terdapat adalah ruang yang cukup.

Menggabungkan Elemen Ditambah Secara Dinamik

Memandangkan elemen label ditambahkan secara pemrograman, adalah penting untuk melaraskan CSS untuk menampungnya. Dengan menetapkan sifat berikut pada elemen label, ia akan menjangkau lebar penuh di bawah dua elemen pertama:

display: block;
width: 100%;

Coretan Kod Akhir

Berikut ialah contoh yang menggabungkan penyelesaian ini:

<div class="parent">
  <input type="range">

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%;
  border: 1px dashed black;
}

Ini sepatutnya memaksa elemen label menjangkau 100% lebar di bawah dua yang pertama elemen, mengekalkan reka letak yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Item Flex Menjangkau Lebar Baris Penuh Di Bawah Item Flex Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!