Artikel ini akan menjelaskan metode untuk mencegah item fleksibel terbungkus di Tailwind CSS.
Bagaimana Mencegah/Menghentikan Barang Fleksibel Terbungkus di Tailwind?
Agar item fleksibel tidak terbungkus di Tailwind, buat file HTML. Kemudian, gunakan utilitas 'flex-nowrap' dengan wadah fleksibel di program HTML untuk mencegah item fleksibel dibungkus. Selanjutnya, pastikan perubahan dengan melihat halaman web HTML.
Cobalah langkah-langkah yang disebutkan di bawah ini, untuk memahaminya dengan lebih baik:
Langkah 1: Mencegah Item Fleksibel Dibungkus dalam Program HTML
Buat program HTML dan gunakan tombol “ flex-nowrap ” utilitas dengan wadah fleksibel yang diinginkan untuk mencegah item fleksibel terbungkus:
< tubuh >
< div kelas = 'flex flex-nowrap h-40' >
< div kelas = 'basis-1/4 bg-merah-500 m-1' > 1 < / div >
< div kelas = 'basis-1/3 bg-kuning-500 m-1' > 2 < / div >
< div kelas = 'basis-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / tubuh >
Di Sini:
- “ melenturkan ” kelas mengaktifkan tata letak flexbox di elemen dan memungkinkan elemen anak untuk diatur dan disejajarkan.
- “ flex-nowrap ” kelas menentukan bahwa item fleksibel tidak boleh dibungkus ke beberapa baris dan menyimpan semua item fleksibel dalam satu baris.
- “ dasar-1/4 ”, “ basis-1/3 ', Dan ' dasar-1/2 ” kelas mengatur bagian dalam
lebarnya masing-masing menjadi 25%, 33,33%, dan 50% dari elemen induknya.
Langkah 2: Verifikasi Keluaran
Untuk memastikan item fleksibel belum dibungkus, lihat halaman web HTML:
Di halaman web di atas, item fleksibel berada dalam satu baris dan belum dibungkus.
Kesimpulan
Untuk mencegah item fleksibel dibungkus di Tailwind, gunakan utilitas 'flex-nowrap' dengan wadah fleksibel yang diinginkan dalam program HTML. Utilitas ini mencegah item fleksibel dari pembungkus. Untuk verifikasi, lihat perubahan di halaman web. Artikel ini telah mengilustrasikan metode untuk mencegah item fleksibel terbungkus di Tailwind CSS.