จะสั่งซื้อรายการ Flex และ Grid ใน Tailwind ได้อย่างไร

บทความนี้จะแสดงวิธีการสั่งซื้อรายการแบบยืดหยุ่นและแบบกริดใน Tailwind CSS

จะสั่งซื้อรายการ Flex และ Grid ใน Tailwind ได้อย่างไร

หากต้องการสั่งซื้อรายการแบบยืดหยุ่นและแบบกริดใน Tailwind CSS ให้สร้างไฟล์ HTML จากนั้น ใช้ยูทิลิตี้ “order-” และระบุค่าการสั่งซื้อในโปรแกรม HTML เพื่อเปลี่ยนลำดับของรายการแบบยืดหยุ่นและแบบกริด อนุญาตให้แสดงรายการ flex ในลำดับที่แตกต่างจากที่แสดงใน DOM (Document Object Model) เพื่อให้แน่ใจว่ามีการเปลี่ยนแปลง ดูหน้าเว็บ HTML

ดูขั้นตอนที่ให้ไว้เพื่อความเข้าใจที่ดีขึ้น:

ขั้นตอนที่ 1: สั่งซื้อรายการ Flex และ Grid ในโปรแกรม HTML
สร้างโปรแกรม HTML และใช้ “ คำสั่ง- ” ยูทิลิตี้ และระบุมูลค่าการสั่งซื้อสำหรับรายการแบบยืดหยุ่นหรือแบบกริด ตัวอย่างเช่น เราได้ใช้ยูทิลิตี 'order-3', 'order-last', 'order-first' และ 'order-2'

ที่นี่:

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

ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์
ดูหน้าเว็บ HTML เพื่อให้แน่ใจว่ารายการ flex และ grid ได้รับการสั่งซื้อแล้ว:

สามารถสังเกตได้ว่ารายการ flex และ grid ได้รับการสั่งซื้อเรียบร้อยแล้วตามที่ระบุไว้

บทสรุป

หากต้องการสั่งซื้อรายการแบบยืดหยุ่นและแบบกริดใน Tailwind CSS ให้ใช้ปุ่ม “ คำสั่ง- ” ยูทิลิตี้ และระบุมูลค่าการสั่งซื้อเพื่อยืดหยุ่นและตารางรายการในโปรแกรม HTML มันจัดเรียงรายการ flex และ grid บนหน้าเว็บใหม่ สำหรับการยืนยัน ดูการเปลี่ยนแปลงบนหน้าเว็บ HTML และตรวจสอบการเปลี่ยนแปลง บทความนี้แสดงวิธีการสั่งซื้อรายการแบบยืดหยุ่นและแบบกริดใน Tailwind CSS