Bagaimana untuk Membuat Item Flex Menjangkau Seluruh Baris Di Bawah Item Flex Lain?

Paksa Item Flex Lebar Penuh untuk Menjangkau Seluruh Baris

Masalah:

Dalam susun atur fleksibel, matlamatnya adalah untuk mengekalkan dua elemen anak pertama pada satu baris, manakala elemen ketiga mendudukinya sendiri baris lebar penuh di bawah. Cabaran timbul daripada keinginan untuk menggunakan sifat flex-grow dan flex-shrink untuk dua elemen pertama, sambil memastikan elemen ketiga meregang ke lebar penuh bekas induk dan muncul di bawah dua elemen pertama.

Penyelesaian:

Untuk memaksa elemen ketiga menjangkau 100% lebar dan muncul pada baris baharu di bawah dua yang lain:

• Tetapkan asas-flex: 100% pada elemen ketiga. Ini memastikan ia menggunakan semua ruang yang tersedia dalam barisnya dan ditolak ke baris baharu.
• Laksanakan flex-wrap: balut pada bekas induk. Ini membolehkan item flex dibalut pada berbilang baris, memuatkan item yang tidak muat dalam lebar baris semasa.

Contoh Kod:

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

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

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

Dengan pendekatan ini, dua elemen pertama menduduki baris yang sama, berkongsi lebar yang tersedia, manakala elemen ketiga merentangi lebar penuh bekas induk dan diletakkan pada baris baharu di bawah.

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