บทความนี้จะยกตัวอย่างวิธีการป้องกันไม่ให้รายการ Flex ขยายหรือย่อขนาดใน Tailwind CSS
จะป้องกันไม่ให้รายการ Flex ขยายหรือหดตัวใน Tailwind ได้อย่างไร
หากต้องการป้องกันไม่ให้รายการ Flex ขยายและย่อใน Tailwind ให้สร้างไฟล์ HTML จากนั้นใช้ “ flex-grow-0 ' และ ' ดิ้น-หด-0 ” โปรแกรมอรรถประโยชน์ที่มีรายการ flex เฉพาะในโปรแกรม HTML ยูทิลิตีเหล่านี้ไม่อนุญาตให้รายการแบบยืดหยุ่นขยายหรือหดตัวตามพื้นที่ภายในคอนเทนเนอร์แบบยืดหยุ่น หลังจากนั้นให้ปรับขนาดหน้าจอของหน้าเว็บ HTML เพื่อให้แน่ใจว่ามีการเปลี่ยนแปลง
ทำตามขั้นตอนที่ให้ไว้สำหรับการใช้งานจริง:
ขั้นตอนที่ 1: ป้องกันไม่ให้รายการ Flex ขยายและย่อขนาดในโปรแกรม HTML
สร้างโปรแกรม HTML และใช้ “ flex-grow-0 ' และ ' ดิ้น-หด-0 ” ยูทิลิตี้พร้อมรายการยืดหยุ่นที่ต้องการเพื่อป้องกันไม่ให้เติบโตหรือหดตัว:
< ร่างกาย >
< แผนก ระดับ = 'เฟล็กซ์ เอช-20' >
< แผนก ระดับ = 'flex-grow-0 bg-สีเหลือง-500 w-40 m-1' > 1 < / แผนก >
< แผนก ระดับ = 'เฟล็กซ์-หด-0 bg-บานเย็น-500 ว-40 ม-1' > 2 < / แผนก >
< แผนก ระดับ = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / แผนก >
< แผนก ระดับ = 'เฟล็กซ์-หด bg-แดง-500 w-40 ม-1' > 4 < / แผนก >
< / แผนก >
< / ร่างกาย >
ที่นี่:
- “ flex-grow-0 ” คลาสป้องกันไม่ให้รายการ flex เติบโตและใช้พื้นที่เพิ่มเติมภายในคอนเทนเนอร์ flex เมื่อมีพื้นที่ว่าง
- “ ดิ้น-หด-0 ” คลาสป้องกันไม่ให้รายการ flex ลดขนาดลงภายใน flex container เมื่อพื้นที่ไม่เพียงพอ
- “ flex-เติบโต ” คลาสอนุญาตให้รายการ flex เติบโตและใช้พื้นที่ว่างภายในคอนเทนเนอร์ flex
- “ ดิ้นหด ” คลาสอนุญาตให้รายการ flex ลดขนาดหากมีพื้นที่ไม่เพียงพอภายในคอนเทนเนอร์ flex
ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์
ดูหน้าเว็บ HTML และเปลี่ยนขนาดหน้าจอเพื่อให้แน่ใจว่ารายการ flex ที่ต้องการได้รับการป้องกันไม่ให้ขยายและย่อ:
เอาต์พุตด้านบนแสดงว่ารายการแบบยืดหยุ่น '2' ไม่หดตัวในพื้นที่ไม่เพียงพอ และรายการ '1' ไม่เพิ่มขึ้นในพื้นที่ว่าง สิ่งนี้บ่งชี้ว่ารายการงอที่ต้องการได้รับการป้องกันไม่ให้เติบโตและหดตัว
บทสรุป
เพื่อป้องกันไม่ให้รายการ Flex ขยายและหดตัวใน Tailwind ให้ใช้ปุ่ม ' flex-grow-0 ' และ ' ดิ้น-หด-0 ” ยูทิลิตี้พร้อมรายการดิ้นที่ต้องการในโปรแกรม HTML สำหรับการยืนยัน ให้เปลี่ยนและดูขนาดหน้าจอของหน้าเว็บ HTML บทความนี้ได้ยกตัวอย่างวิธีการป้องกันรายการ Flex ไม่ให้ขยายหรือย่อขนาดใน Tailwind CSS