การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Flexbox

Flexbox ใน Bootstrap 5 ช่วยให้เราสามารถจัดเรียงคอนเทนต์ได้อย่างอิสระ ไม่ว่าจะเป็นแนวตั้งหรือแนวนอน รวมถึงการกระจายพื้นที่ระหว่างองค์ประกอบต่าง ๆ ตามที่เราต้องการ

การสร้าง Container แบบ Flex

การเริ่มใช้งาน Flexbox ใน Bootstrap 5 สามารถทำได้ง่าย ๆ โดยการเพิ่มคลาส d-flex ให้กับคอนเทนเนอร์ที่ต้องการให้เป็น Flexbox เช่น

HTML
<div class="d-flex">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

ในโค้ดด้านบน คอนเทนเนอร์จะถูกตั้งค่าเป็น Flexbox โดยที่ทุกองค์ประกอบภายในจะถูกจัดเรียงอยู่ในแถวเดียวกันตามแนวนอน

การจัดเรียงคอนเทนต์แนวนอนและแนวตั้ง

Flexbox ช่วยให้เราสามารถกำหนดทิศทางของการจัดเรียงคอนเทนต์ได้โดยใช้คลาส flex-row หรือ flex-column สำหรับจัดเรียงในแนวนอนและแนวตั้งตามลำดับ

HTML
<!-- จัดเรียงคอนเทนต์ในแนวนอน -->
<div class="d-flex flex-row">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

<!-- จัดเรียงคอนเทนต์ในแนวตั้ง -->
<div class="d-flex flex-column">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

การจัดกึ่งกลางคอนเทนต์ (Centering)

Bootstrap 5 Flexbox ช่วยจัดการการจัดวางคอนเทนต์ให้อยู่กึ่งกลางได้อย่างง่ายดาย โดยใช้คลาส justify-content-center สำหรับจัดกึ่งกลางในแนวนอน และ align-items-center สำหรับจัดกึ่งกลางในแนวตั้ง

HTML
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
    <div>Centered Element</div>
</div>

การกระจายคอนเทนต์ (Space Between)

การกระจายคอนเทนต์ให้มีระยะห่างที่เหมาะสมสามารถทำได้ง่าย ๆ โดยใช้คลาส justify-content-between, justify-content-around, และ justify-content-evenly ซึ่งช่วยกระจายองค์ประกอบต่าง ๆ ตามรูปแบบที่แตกต่างกัน

HTML
<!-- กระจายคอนเทนต์แบบมีพื้นที่ว่างระหว่างกัน -->
<div class="d-flex justify-content-between">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

<!-- กระจายคอนเทนต์แบบมีพื้นที่ว่างรอบ ๆ -->
<div class="d-flex justify-content-around">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

การทำให้คอนเทนต์ยืดหยุ่น (Flex Grow และ Flex Shrink)

Flexbox ช่วยให้คอนเทนต์ภายในยืดหยุ่นตามพื้นที่ที่มีอยู่ได้ โดยใช้คลาส flex-grow-1 เพื่อให้คอนเทนต์ยืดออกเท่าที่สามารถทำได้ หรือใช้ flex-shrink-1 สำหรับให้คอนเทนต์ย่อขนาดลงตามพื้นที่ที่จำกัด

HTML
<div class="d-flex">
    <div class="flex-grow-1">Element 1 (grow)</div>
    <div>Element 2</div>
</div>

ในตัวอย่างนี้ Element 1 จะยืดออกเท่าที่สามารถทำได้ ในขณะที่ Element 2 จะคงขนาดเท่าเดิม

การจัดแนวคอนเทนต์ให้ชิดขอบ (Aligning)

การจัดแนวคอนเทนต์ให้ชิดขอบด้านต่าง ๆ สามารถทำได้โดยใช้คลาส align-items-start, align-items-center, และ align-items-end สำหรับการจัดแนวในแนวตั้ง และ align-self-start, align-self-center, align-self-end สำหรับการจัดแนวขององค์ประกอบแต่ละตัวในคอนเทนเนอร์

HTML
<div class="d-flex align-items-start">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

การสร้าง Flex แบบ Responsive

Bootstrap 5 รองรับ Flexbox แบบ Responsive ซึ่งช่วยให้สามารถปรับการจัดวางของคอนเทนต์ตามขนาดหน้าจอได้ เช่นการใช้ flex-sm-column, flex-md-row, flex-lg-column, หรือ flex-xl-row เพื่อจัดการการจัดวางคอนเทนต์ตามขนาดหน้าจอ

HTML
<div class="d-flex flex-sm-column flex-md-row">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

ในตัวอย่างนี้ เมื่อหน้าจอมีขนาดเล็ก (เช่นสมาร์ทโฟน) คอนเทนต์จะถูกจัดเรียงในแนวตั้ง แต่เมื่อหน้าจอใหญ่ขึ้นจะถูกจัดเรียงในแนวนอน

ตัวอย่างการใช้งานจริง

สมมุติเราต้องการสร้างเลย์เอาท์ที่มีการจัดเรียงคอนเทนต์ในแนวนอนที่กึ่งกลาง พร้อมด้วยปุ่มที่ยืดหยุ่นให้เต็มพื้นที่ที่เหลือ มีแนวทางการใช้งาน Flexbox ดังนี้

HTML
<div class="d-flex justify-content-center align-items-center" style="height: 300px;">
    <div class="flex-grow-1">Content Block 1</div>
    <button class="btn btn-primary flex-grow-1 mx-2">Flexible Button</button>
    <div class="flex-grow-1">Content Block 2</div>
</div>

สรุป

การใช้งาน Flexbox ใน Bootstrap 5 นั้นเป็นเครื่องมือที่ทรงพลังในการจัดการเลย์เอาท์ของเว็บไซต์ ไม่ว่าจะเป็นการจัดกึ่งกลางคอนเทนต์ การกระจายพื้นที่ หรือการยืดหยุ่นของคอนเทนต์เพื่อให้ตอบสนองตามขนาดหน้าจอ ทำให้เว็บไซต์ของเราสามารถปรับตัวได้ดีในทุกสถานการณ์

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ