Artikel ini akan menerangkan kaedah untuk menghalang item flex daripada dibalut dalam CSS Tailwind.
Bagaimana untuk Menghalang/Menghentikan Barangan Fleksibel Daripada Membungkus dalam Tailwind?
Untuk menghentikan item flex daripada dibungkus dalam Tailwind, buat fail HTML. Kemudian, gunakan utiliti 'flex-nowrap' dengan bekas flex dalam program HTML untuk mengelakkan item flex daripada dibalut. Seterusnya, pastikan perubahan dengan melihat halaman web HTML.
Cuba langkah yang dinyatakan di bawah, untuk memahaminya dengan lebih baik:
Langkah 1: Halang Item Flex Daripada Membungkus dalam Program HTML
Buat program HTML dan gunakan ' flex-nowrap ” utiliti dengan bekas flex yang diingini untuk mengelakkan item flex daripada dibalut:
< badan >
< div kelas = 'flex flex-nowrap h-40' >
< div kelas = 'asas-1/4 bg-merah-500 m-1' > 1 < / div >
< div kelas = 'asas-1/3 bg-kuning-500 m-1' > 2 < / div >
< div kelas = 'asas-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / badan >
di sini:
- “ lentur kelas ” membolehkan susun atur flexbox pada elemen dan membenarkan elemen kanak-kanak disusun dan diselaraskan.
- “ flex-nowrap ” kelas menentukan bahawa item flex tidak boleh dibalut pada berbilang baris dan menyimpan semua item flex dalam satu baris.
- ' asas-1/4 ”, “ asas-1/3 ”, dan “ asas-1/2 ” kelas menetapkan dalaman
lebarnya masing-masing kepada 25%, 33.33% dan 50% daripada elemen induknya.
Langkah 2: Sahkan Output
Untuk memastikan bahawa item flex belum dibalut, lihat halaman web HTML:
Dalam halaman web di atas, item fleksibel berada dalam satu baris dan belum dibalut.
Kesimpulan
Untuk mengelakkan item flex daripada dibalut dalam Tailwind, gunakan utiliti 'flex-nowrap' dengan bekas flex yang dikehendaki dalam program HTML. Utiliti ini menghalang item flex daripada dibalut. Untuk pengesahan, lihat perubahan pada halaman web. Artikel ini telah menggambarkan kaedah untuk menghalang item flex daripada dibalut dalam CSS Tailwind.