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