Bagaimana untuk Menjadikan Item Flex Menduduki Lebar Penuh pada Baris Baharu?

Lebar Penuh Baris Fleksibel untuk Item Tertentu

Anda menyasarkan untuk memaksa elemen "label" untuk menduduki lebar penuh di bawah dua lentur lain- elemen kedudukan. Begini cara untuk mencapainya:

Biasanya, item flex berkongsi ruang yang tersedia secara sama rata. Walau bagaimanapun, anda mahu satu item (label) menduduki keseluruhan ruang yang tinggal pada baris baharu. Untuk melakukan ini:

1. Tetapkan Lebar Item kepada 100%: Tetapkan elemen label lebar 100% atau gunakan asas-flex: 100%. Ini memastikan ia menggunakan semua ruang mendatar yang tinggal.
2. Dayakan Balutan Bekas: Laraskan bekas induk untuk membolehkan pembalut (flex-wrap: wrap). Ini memaksa elemen adik-beradik mengalir ke baris baharu apabila ruang kehabisan.

Berikut ialah kod yang dikemas kini:

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

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

Dengan pelarasan ini, elemen label akan menjangkau lebar penuh baris di bawah dua item fleksibel yang lain, seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Item Flex Menduduki Lebar Penuh pada Baris Baharu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!