บทที่ 7: การจัด Layout ด้วย Flexbox ใน Tailwind CSS

Flexbox คืออะไร?

Flexbox (Flexible Box Layout) เป็นเทคนิคการจัด Layout ที่ทรงพลังและใช้งานง่ายใน CSS Tailwind CSS ช่วยให้การใช้ Flexbox ง่ายขึ้นด้วยชุด Utility Classes ที่ช่วยให้คุณสามารถจัดตำแหน่งและกระจายองค์ประกอบต่าง ๆ ได้อย่างสะดวกและรวดเร็ว

1. เริ่มต้นใช้งาน Flexbox

การเปิดใช้งาน Flexbox ใน Tailwind CSS ทำได้ง่าย ๆ โดยใช้คลาส flex:

ตัวอย่าง:

<div class="flex bg-gray-200 p-4">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-green-500 p-4">Box 2</div>
  <div class="bg-red-500 p-4">Box 3</div>
</div>

ในตัวอย่างนี้:

คลาส flex ทำให้ Container ใช้ Flexbox
องค์ประกอบลูก (Box 1, Box 2, Box 3) จะเรียงกันในแนวนอนตามค่าเริ่มต้นของ Flexbox

2. การจัดเรียงแนวแกนหลัก (Main Axis)

Flexbox ช่วยให้คุณจัดเรียงองค์ประกอบในแนวแกนหลัก (Main Axis) ด้วยคลาส justify-{value}:

คลาส	คำอธิบาย
`justify-start`	จัดองค์ประกอบไปทางด้านซ้าย (ค่าเริ่มต้น)
`justify-center`	จัดองค์ประกอบให้อยู่ตรงกลาง
`justify-end`	จัดองค์ประกอบไปทางด้านขวา
`justify-between`	กระจายองค์ประกอบโดยมีระยะห่างเท่ากัน
`justify-around`	กระจายองค์ประกอบโดยมีระยะห่างรอบเท่ากัน
`justify-evenly`	กระจายองค์ประกอบโดยมีระยะห่างสม่ำเสมอ

ตัวอย่าง:

<div class="flex justify-center bg-gray-200 p-4">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-green-500 p-4">Box 2</div>
  <div class="bg-red-500 p-4">Box 3</div>
</div>

ในตัวอย่างนี้ คลาส justify-center จะจัดองค์ประกอบให้อยู่ตรงกลางในแนวนอน

3. การจัดเรียงแนวแกนข้าม (Cross Axis)

การจัดเรียงในแนวแกนข้าม (Cross Axis) ใช้คลาส items-{value}:

คลาส	คำอธิบาย
`items-start`	จัดองค์ประกอบให้อยู่ด้านบน
`items-center`	จัดองค์ประกอบให้อยู่ตรงกลาง
`items-end`	จัดองค์ประกอบให้อยู่ด้านล่าง
`items-stretch`	ยืดองค์ประกอบให้เต็มพื้นที่ (ค่าเริ่มต้น)

ตัวอย่าง:

<div class="flex items-center bg-gray-200 h-32">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-green-500 p-4">Box 2</div>
  <div class="bg-red-500 p-4">Box 3</div>
</div>

ในตัวอย่างนี้ คลาส items-center จะจัดองค์ประกอบให้อยู่ตรงกลางในแนวตั้ง

4. การเปลี่ยนทิศทางของ Flexbox

ค่าเริ่มต้นของ Flexbox คือการจัดเรียงในแนวนอน (row) คุณสามารถเปลี่ยนทิศทางได้ด้วยคลาส flex-{direction}:

คลาส	คำอธิบาย
`flex-row`	เรียงในแนวนอน (ค่าเริ่มต้น)
`flex-row-reverse`	เรียงในแนวนอนกลับด้าน
`flex-col`	เรียงในแนวตั้ง
`flex-col-reverse`	เรียงในแนวตั้งกลับด้าน

ตัวอย่าง:

<div class="flex flex-col bg-gray-200 p-4">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-green-500 p-4">Box 2</div>
  <div class="bg-red-500 p-4">Box 3</div>
</div>

ในตัวอย่างนี้ คลาส flex-col จะทำให้องค์ประกอบเรียงกันในแนวตั้ง

5. การกำหนดขนาดขององค์ประกอบลูก

คุณสามารถกำหนดขนาดขององค์ประกอบลูกใน Flexbox ด้วยคลาส flex-{value}:

คลาส	คำอธิบาย
`flex-1`	ใช้พื้นที่ที่เหลือทั้งหมด
`flex-auto`	ขยายหรือย่อขนาดอัตโนมัติตามเนื้อหา
`flex-initial`	ใช้ขนาดเริ่มต้นตามเนื้อหา
`flex-none`	ไม่ขยายหรือย่อขนาด

ตัวอย่าง:

<div class="flex bg-gray-200 p-4">
  <div class="flex-1 bg-blue-500 p-4">Box 1</div>
  <div class="flex-1 bg-green-500 p-4">Box 2</div>
  <div class="bg-red-500 p-4">Box 3</div>
</div>

ในตัวอย่างนี้ Box 1 และ Box 2 จะขยายเพื่อใช้พื้นที่ที่เหลือทั้งหมด

6. การเว้นระยะห่างระหว่างองค์ประกอบ (Gap)

Tailwind CSS รองรับการเว้นระยะห่างระหว่างองค์ประกอบใน Flexbox ด้วยคลาส gap-{value}:

ตัวอย่าง:

<div class="flex gap-4 bg-gray-200 p-4">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-green-500 p-4">Box 2</div>
  <div class="bg-red-500 p-4">Box 3</div>
</div>

ในตัวอย่างนี้ คลาส gap-4 จะเว้นระยะห่างระหว่างองค์ประกอบแต่ละตัว 1rem

7. ตัวอย่างการใช้งาน Flexbox ในโปรเจกต์จริง

การสร้าง Navbar:

<nav class="flex justify-between items-center bg-gray-800 text-white p-4">
  <div class="text-lg font-bold">MyWebsite</div>
  <ul class="flex gap-4">
    <li><a href="#" class="hover:text-blue-400">Home</a></li>
    <li><a href="#" class="hover:text-blue-400">About</a></li>
    <li><a href="#" class="hover:text-blue-400">Contact</a></li>
  </ul>
</nav>

การจัด Layout ของหน้า:

<div class="flex h-screen">
  <aside class="w-1/4 bg-gray-700 text-white p-4">
    Sidebar
  </aside>
  <main class="flex-1 bg-gray-100 p-4">
    Main Content
  </main>
</div>

สรุป

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