วิธีสร้าง Flex Container ระดับบล็อกใน Tailwind

• • “ ดิ้น คลาส ” ใช้เพื่อสร้างคอนเทนเนอร์แบบยืดหยุ่นระดับบล็อก
  • “ ช่องว่าง-2 ” class เพิ่มระยะห่าง 2 หน่วยระหว่างองค์ประกอบลูกของ flex
  • “ ม.-2 ” class เพิ่มระยะขอบ 2 หน่วยให้กับทุกด้านของคอนเทนเนอร์
  • “ เส้นขอบ-2 ” คลาสเพิ่มเส้นขอบให้กับคอนเทนเนอร์ที่มีความกว้าง 2 หน่วย
  • “ ขอบสีดำ ” class ตั้งค่าสีเส้นขอบเป็นสีดำ

ในองค์ประกอบดิ้นเด็ก:

• • “ bg-สีเหลือง-500 ” คลาสใช้สีเหลืองกับพื้นหลังของรายการแบบยืดหยุ่น
  • “ หน้า-4 ” คลาสจะเพิ่มช่องว่างภายใน 4 หน่วยให้กับทุกด้านของรายการแบบยืดหยุ่น

เอาต์พุต

ในเอาต์พุตด้านบน เส้นขอบแสดงว่าคอนเทนเนอร์เป็นคอนเทนเนอร์แบบยืดหยุ่นระดับบล็อก ซึ่งใช้ความกว้างทั้งหมดขององค์ประกอบหลัก (เบราว์เซอร์)

อีกทางหนึ่ง ผู้ใช้สามารถตรวจสอบได้โดยการตรวจสอบองค์ประกอบคอนเทนเนอร์แบบยืดหยุ่นบนหน้าเว็บ:

เอาต์พุตด้านบนระบุว่าคอนเทนเนอร์เป็นคอนเทนเนอร์เฟล็กซ์ระดับบล็อก

บทสรุป:

หากต้องการสร้างคอนเทนเนอร์แบบยืดหยุ่นระดับบล็อกใน Tailwind จำเป็นต้องเพิ่ม ' ดิ้น ” คลาสยูทิลิตี้พร้อมคอนเทนเนอร์เฉพาะและระบุองค์ประกอบย่อย ผู้ใช้สามารถกำหนดและแก้ไขรายการแบบยืดหยุ่นได้ตามความต้องการ สำหรับการยืนยัน ให้เพิ่มเส้นขอบลงในคอนเทนเนอร์และดูหน้าเว็บหรือตรวจสอบองค์ประกอบนั้นบนหน้าเว็บ บทความนี้ได้อธิบายวิธีการสร้างคอนเทนเนอร์แบบยืดหยุ่นระดับบล็อกใน Tailwind