สอนใช้งาน Bootstrap 4

Bootstrap 4 การใช้งาน Flex

Flexbox เป็นเครื่องมือที่มีประสิทธิภาพในการจัดการการแสดงผลและจัดวางองค์ประกอบในหน้าเว็บ โดย Bootstrap 4 ได้รองรับการใช้งาน Flexbox อย่างเต็มที่ผ่านชุดคลาสที่ทำให้การจัดวางและจัดรูปแบบองค์ประกอบเป็นเรื่องง่าย

การใช้งาน Flex Container

การเริ่มต้นใช้งาน Flexbox ใน Bootstrap 4 ต้องกำหนด container ที่มีคุณสมบัติเป็น Flex โดยใช้คลาส .d-flex บนองค์ประกอบที่ต้องการให้เป็น Flex container ซึ่ง Flex container นี้จะควบคุมลูกของมันทั้งหมด

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

การจัดวางทิศทางของ Flex Items

Flexbox รองรับการกำหนดทิศทางของ Flex items ใน container ซึ่งสามารถใช้คลาสเหล่านี้เพื่อกำหนดทิศทาง

  • .flex-row (ค่าเริ่มต้น) เพื่อเรียงตามแนวนอน
  • .flex-row-reverse เพื่อเรียงตามแนวนอนย้อนกลับ
  • .flex-column เพื่อเรียงตามแนวตั้ง
  • .flex-column-reverse เพื่อเรียงตามแนวตั้งย้อนกลับ
HTML
<div class="d-flex flex-row">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

การจัดวาง Align Items ตามแนวแกนขวาง (Cross Axis)

Flexbox ยังสามารถจัดวางองค์ประกอบตามแนวแกนขวางได้ด้วยคลาส .align-items-*

  • .align-items-start: จัดให้อยู่ที่จุดเริ่มต้น (บนสุด)
  • .align-items-center: จัดให้อยู่ตรงกลาง
  • .align-items-end: จัดให้อยู่ที่จุดสิ้นสุด (ล่างสุด)
HTML
<div class="d-flex align-items-center" style="height: 200px;">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

การจัดวาง Justify Content ตามแนวแกนหลัก (Main Axis)

สำหรับการจัดวาง Flex items ตามแนวแกนหลัก สามารถใช้คลาส .justify-content-*

  • .justify-content-start: จัดให้อยู่ที่จุดเริ่มต้น
  • .justify-content-center: จัดให้อยู่ตรงกลาง
  • .justify-content-end: จัดให้อยู่ที่จุดสิ้นสุด
  • .justify-content-around: จัดวางองค์ประกอบโดยให้มีช่องว่างเท่าๆ กันรอบๆ
  • .justify-content-between: จัดวางให้ชิดขอบ container ทั้งสองด้าน
HTML
<div class="d-flex justify-content-between">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

Flex Grow, Shrink และ Basis

Bootstrap 4 มีคลาสที่ช่วยในการควบคุมขนาดการขยายตัวและการย่อของ Flex items ด้วยคลาสต่อไปนี้

  • .flex-grow-1: ให้ Flex item ขยายตัวตามพื้นที่ที่เหลือ
  • .flex-shrink-1: ให้ Flex item ย่อขนาดลงตามที่จำเป็น
  • .flex-fill: ให้ Flex item ขยายเต็มพื้นที่ที่มี
HTML
<div class="d-flex">
  <div class="flex-grow-1">Box 1</div>
  <div class="flex-shrink-1">Box 2</div>
  <div>Box 3</div>
</div>

การจัดเรียงตัวแบบแนวนอนและแนวตั้งผสมกัน

สามารถใช้ Flexbox เพื่อจัดวางองค์ประกอบทั้งแนวนอนและแนวตั้งใน container เดียวกันได้ เช่น

HTML
<div class="d-flex flex-column align-items-center justify-content-center" style="height: 300px;">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

การใช้งาน Flex Order

Flexbox รองรับการกำหนดลำดับของ Flex items โดยใช้คลาส .order-* เพื่อควบคุมลำดับขององค์ประกอบ

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

การใช้งาน Flex สำหรับ Responsive Design

Bootstrap 4 ออกแบบมาให้รองรับการใช้งาน Flexbox กับ Responsive Design โดยสามารถใช้คลาส .d-sm-flex, .d-md-flex, .d-lg-flex, และ .d-xl-flex เพื่อควบคุม Flex ในหน้าจอขนาดต่างๆ

HTML
<div class="d-flex d-md-none">
  <div>Box 1</div>
  <div>Box 2</div>
</div>

การใช้งาน Flex Wrap

คลาส .flex-wrap ใช้ในการจัดวาง Flex items เมื่อพื้นที่ไม่เพียงพอ โดยจะย้ายไปยังบรรทัดใหม่

  • .flex-wrap: ให้ Flex items ย้ายไปบรรทัดใหม่เมื่อพื้นที่ไม่พอ
  • .flex-nowrap: ไม่ให้ย้ายบรรทัดใหม่
  • .flex-wrap-reverse: ย้ายบรรทัดใหม่ในลักษณะย้อนกลับ
HTML
<div class="d-flex flex-wrap">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
</div>

สรุป

การใช้ Flexbox ผ่าน Bootstrap 4 ทำให้การจัดวางและจัดการองค์ประกอบในหน้าเว็บง่ายขึ้นมาก โดยไม่ต้องเขียน CSS ที่ซับซ้อน คลาสต่างๆ ที่ได้กล่าวถึงข้างต้นสามารถประยุกต์ใช้ในการจัดวางองค์ประกอบได้อย่างยืดหยุ่น และสามารถรองรับการทำงานใน Responsive Design ได้อย่างดี

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

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