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

Item Flex Lebar Penuh dalam Baris

Anda menyasarkan untuk mengekalkan dua elemen anak pertama pada satu baris sambil meletakkan item ketiga di bawah ia pada lebar penuh, menggunakan flex untuk ini reka letak.

Soalan:

Bagaimanakah anda memaksa elemen "label" untuk merentangi keseluruhan lebar baris di bawah dua elemen kedudukan lentur yang pertama?

Jawapan:

Untuk memaksa item fleksibel menjangkau baris penuh, gunakan lebar: 100% atau asas lentur: 100%, dan dayakan balut pada bekas. Pelarasan berikut akan mencapai matlamat ini:

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

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

Dengan perubahan ini, elemen "label" akan menduduki lebar penuh di bawah dua elemen lain, sambil mengekalkan kedudukan lentur yang diingini untuk dua elemen anak pertama.

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