วิธีตั้งค่า Flex Basis ใน Tailwind

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

วิธีตั้งค่า Flex Basis ใน Tailwind

หากต้องการตั้งค่าพื้นฐานการทำงานแบบยืดหยุ่นใน Tailwind CSS ให้สร้างไฟล์ HTML จากนั้นใช้ปุ่ม “ พื้นฐาน-<ขนาด> ” คลาสยูทิลิตี้ในโปรแกรม HTML และระบุขนาดรายการแบบยืดหยุ่น ยูทิลิตีนี้กำหนดขนาดเริ่มต้นของรายการแบบยืดหยุ่น เพื่อให้แน่ใจว่าการเปลี่ยนแปลง ดูหน้าเว็บ

ดูขั้นตอนที่ให้ไว้สำหรับการสาธิตเชิงปฏิบัติ:

ขั้นตอนที่ 1: ตั้งค่า Flex Basis ในโปรแกรม HTML
สร้างโปรแกรม HTML และใช้ “ พื้นฐาน-<ขนาด> ” คลาสยูทิลิตี้เพื่อกำหนดขนาดของรายการดิ้น ตัวอย่างเช่น เราได้ใช้ “ พื้นฐาน-1/4 ”, “ พื้นฐาน-1/3 ', และ ' พื้นฐาน-1/2 ” ยูทิลิตี้เพื่อตั้งค่ารายการยืดหยุ่นสามรายการ:

ที่นี่:

• “ ดิ้น ” คลาสใช้เพื่อสร้างเลย์เอาต์ที่ยืดหยุ่นและปรับขนาดองค์ประกอบย่อยตามพื้นที่ว่าง
• “ ชั่วโมง-20 ” class กำหนดความสูงของ
  เป็น 20 หน่วย
• “ พื้นฐาน-1/4 ” class ตั้งค่าความกว้างขององค์ประกอบภายใน
  เป็น 25% ขององค์ประกอบหลัก
• “ พื้นฐาน-1/3 ” class กำหนดความกว้างของ
  ภายในเป็น 33.33% ของคอนเทนเนอร์หลัก
• “ พื้นฐาน-1/2 ” คลาสตั้งค่าความกว้างของ
  เป็น 50% ของคอนเทนเนอร์หลัก
• “ bg-สีแดง-400 ” คลาสใช้สีพื้นหลังสีแดงกับ
• “ bg-น้า-400 ” คลาสกำหนดสีน้านให้เป็นพื้นหลังของ
• “ bg-ส้ม-400 ” คลาสใช้สีพื้นหลังสีส้มกับ
• “ ม.1 ” class เพิ่มระยะขอบ 1 หน่วยรอบแต่ละองค์ประกอบ

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

ในเอาต์พุตด้านบน สามารถดู flex-basis ได้ตามสไตล์

บทสรุป

พื้นฐาน Flex ช่วยให้ผู้ใช้สร้างเลย์เอาต์ที่ยืดหยุ่นซึ่งปรับขนาดและความละเอียดของหน้าจอต่างๆ หากต้องการตั้งค่าพื้นฐานการทำงานแบบยืดหยุ่นใน Tailwind CSS ให้ใช้ปุ่ม ' พื้นฐาน-<ขนาด> ” คลาสยูทิลิตี้ใช้ในโปรแกรม HTML ผู้ใช้จำเป็นต้องระบุขนาดรายการแบบยืดหยุ่นและตรวจสอบการเปลี่ยนแปลงโดยการดูหน้าเว็บ บทความนี้ได้อธิบายวิธีตั้งค่าพื้นฐานการทำงานแบบยืดหยุ่นใน Tailwind CSS