Tulisan ini akan menunjukkan kaedah untuk menghalang item flex daripada tumbuh atau mengecut dalam Tailwind CSS.
Bagaimana untuk Menghalang Barangan Flex daripada Tumbuh atau Mengecut dalam Tailwind?
Untuk mengelakkan item flex daripada tumbuh dan mengecut dalam Tailwind, buat fail HTML. Kemudian, gunakan ' flex-grow-0 ” dan “ lentur-mengecut-0 ” utiliti dengan item flex khusus dalam program HTML. Utiliti ini tidak membenarkan item flex berkembang atau mengecut mengikut ruang dalam bekas flex. Selepas itu, laraskan saiz skrin halaman web HTML untuk memastikan perubahan.
Ikuti langkah-langkah yang disediakan untuk pelaksanaan praktikalnya:
Langkah 1: Halang Item Flex Daripada Berkembang dan Mengecut dalam Program HTML
Buat program HTML dan gunakan ' flex-grow-0 ” dan “ lentur-mengecut-0 ” utiliti dengan item flex yang diingini untuk menghalangnya daripada membesar atau mengecut:
< badan >
< div kelas = 'flex h-20' >
< div kelas = 'flex-grow-0 bg-kuning-500 w-40 m-1' > 1 < / div >
< div kelas = 'flex-mengecut-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div kelas = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div kelas = 'flex-mengecut bg-merah-500 w-40 m-1' > 4 < / div >
< / div >
< / badan >
di sini:
- “ flex-grow-0 ” kelas menghalang item flex daripada berkembang dan mengambil ruang tambahan dalam bekas flex apabila ruang tersedia.
- “ lentur-mengecut-0 ” kelas menghalang item flex daripada mengecut dan berkurangan dalam bekas flex apabila ruang tidak mencukupi.
- “ flex-grow kelas ” membolehkan item flex berkembang dan menduduki ruang yang tersedia dalam bekas flex.
- “ lentur-mengecut kelas ” membenarkan item flex mengecut jika tidak ada ruang yang mencukupi dalam bekas flex.
Langkah 2: Sahkan Output
Lihat halaman web HTML dan tukar saiz skrin untuk memastikan item flex yang diingini telah dihalang daripada membesar dan mengecut:
Output di atas menunjukkan bahawa item flex '2' tidak mengecut dalam ruang yang tidak mencukupi dan item '1' tidak berkembang dalam ruang yang tersedia. Ini menunjukkan bahawa item flex yang dikehendaki telah dihalang daripada membesar dan mengecut.
Kesimpulan
Untuk mengelakkan item flex daripada tumbuh dan mengecut dalam Tailwind, gunakan ' flex-grow-0 ” dan “ lentur-mengecut-0 ” utiliti dengan item fleksibel yang dikehendaki dalam program HTML. Untuk pengesahan, tukar dan lihat saiz skrin halaman web HTML. Tulisan ini telah menunjukkan kaedah untuk menghalang item flex daripada tumbuh atau mengecut dalam Tailwind CSS.