Flexbox
Flexbox Layout
Tailwind ធ្វើឲ្យ Flexbox ងាយស្រួលប្រើ។ Flexbox គឺជា layout system សម្រាប់រៀបចំធាតុតាមជួរ (1D layout - row or column)។
🎯 អ្វីទៅជា Flexbox?
Flexbox (Flexible Box Layout) គឺជា CSS layout module ដែលធ្វើឲ្យងាយស្រួល:
| Feature | Description |
|---|---|
| 📏 Alignment | Center content both horizontally and vertically ងាយស្រួល |
| 🔄 Direction Control | ផ្លាស់ប្តូរទិសពី row ទៅ column យ៉ាងងាយ |
| 📐 Space Distribution | ចែកចន្លោះ space រវាងធាតុ ស្មើៗគ្នា |
| 🎨 Flexible Sizing | ធាតុអាច grow ឬ shrink ដើម្បី fill space |
| 📱 Responsive | ងាយស្រួលធ្វើ responsive layouts |
🧭 Main Axis vs Cross Axis
Flexbox មាន 2 axes:
| Axis | Direction | Control Property | Tailwind Classes |
|---|---|---|---|
| Main Axis | Primary direction (→ row or ↓ column) | justify-content | justify-start, justify-center, justify-between |
| Cross Axis | Perpendicular (↓ if row, → if column) | align-items | items-start, items-center, items-end |
🔀 Flex Direction
Direction controls ទិសរបស់ flexbox:
| Class | CSS Property | Layout | Use Case |
|---|---|---|---|
flex-row |
flex-direction: row | → Horizontal (default) | Navbar, button groups, horizontal layouts |
flex-row-reverse |
flex-direction: row-reverse | ← Horizontal reversed | RTL layouts, reversed menus |
flex-col |
flex-direction: column | ↓ Vertical | Sidebar, vertical cards, mobile layouts |
flex-col-reverse |
flex-direction: column-reverse | ↑ Vertical reversed | Chat messages (newest at bottom) |
📦 Flex Wrap
Wrap controls តើធាតុ wrap ទៅ line ថ្មីទេ:
| Class | Behavior | Use Case |
|---|---|---|
flex-nowrap |
ធាតុនៅជួរតែមួយ (may overflow) | Fixed number of items, navbar |
flex-wrap |
ធាតុ wrap ទៅជួរថ្មី | Tags, responsive cards, image galleries |
flex-wrap-reverse |
Wrap បញ្ច្រាស់ | Special layouts (rarely used) |
↔️ Justify Content (Main Axis)
Justify controls ការរៀបចំតាម main axis:
| Class | Visual | Description | Use Case |
|---|---|---|---|
justify-start |
[1][2][3]__________ | Pack at start (default) | Default behavior |
justify-center |
_____[1][2][3]_____ | Center items | Centered buttons, hero content |
justify-end |
__________[1][2][3] | Pack at end | Right-aligned buttons |
justify-between |
[1]______[2]______[3] | Equal space between | Navbar (logo left, menu right) |
justify-around |
__[1]___[2]___[3]__ | Equal space around each | Evenly distributed items |
justify-evenly |
___[1]___[2]___[3]___ | Truly equal spacing | Perfectly distributed items |
↕️ Align Items (Cross Axis)
Align controls ការរៀបចំតាម cross axis:
| Class | Description | Use Case |
|---|---|---|
items-start |
Align at top (if row) | Items of different heights aligned at top |
items-center |
Vertical center | Most common - center vertically |
items-end |
Align at bottom | Footer elements, baseline alignment |
items-stretch |
Stretch to fill (default) | Equal height cards |
items-baseline |
Align text baseline | Mix of text sizes aligned |
🎛️ Flex Grow, Shrink, Basis
| Class | CSS | Behavior | Use Case |
|---|---|---|---|
flex-1 |
flex: 1 1 0% | Grow & shrink equally | Equal width columns |
flex-auto |
flex: 1 1 auto | Grow/shrink based on content | Flexible, content-based sizing |
flex-initial |
flex: 0 1 auto | Shrink but not grow | Default flexbox behavior |
flex-none |
flex: 0 0 auto | Don't grow or shrink | Fixed width sidebar, icons |
grow |
flex-grow: 1 | Can grow to fill space | Expandable main content area |
grow-0 |
flex-grow: 0 | Cannot grow | Fixed size items |
shrink |
flex-shrink: 1 | Can shrink | Responsive items |
shrink-0 |
flex-shrink: 0 | Cannot shrink | Prevent text wrapping, fixed icons |
📏 Gap (Spacing Between Items)
| Class | Size | Use Case |
|---|---|---|
gap-0 |
0px | No spacing (items touch) |
gap-2 |
0.5rem (8px) | Tight spacing (small buttons) |
gap-4 |
1rem (16px) | Common default spacing |
gap-8 |
2rem (32px) | Large spacing (cards, sections) |
gap-x-4 gap-y-2 |
Different X/Y | Horizontal spacing ≠ vertical spacing |
🎯 Common Flexbox Patterns
| Pattern | Classes | Purpose |
|---|---|---|
| Center Everything | flex items-center justify-center |
Perfect center (both axes) |
| Navbar | flex items-center justify-between |
Logo left, menu right |
| Vertical Stack | flex flex-col gap-4 |
Vertical list with spacing |
| Equal Columns | flex gap-4 + flex-1 on children |
Equal width columns |
| Sidebar Layout | flex + flex-none w-64 (sidebar) + flex-1 (main) |
Fixed sidebar + flexible main |
| Card Grid | flex flex-wrap gap-4 |
Responsive card layout |
| Button Group | flex gap-2 |
Horizontal buttons with spacing |
🆚 Flexbox vs Grid - When to Use?
| Use Flexbox When... | Use Grid When... |
|---|---|
| 📏 1D layout (single row or column) | 📐 2D layout (rows AND columns) |
| 🎯 Centering content | 🏗️ Complex page layouts |
| 📱 Navbar, menus | 🖼️ Image galleries (rows × columns) |
| 🔘 Button groups | 📰 Magazine layouts |
| 📋 Forms (label + input) | 🎴 Card grids |
| ↔️ Items flow in one direction | 🧩 Items need row/column spanning |
✅ Flexbox Best Practices
| ✅ DO | ❌ DON'T |
|---|---|
| Use gap for spacing (modern, clean) | Use margin on individual items (old way) |
| Use flex for 1D layouts (row OR column) | Use flex for complex 2D grids (use Grid instead) |
| Combine justify + items for perfect centering | Forget to set items-center (won't center vertically) |
| Use flex-1 for equal-width children | Set fixed widths on all flex children |
| Use flex-wrap for responsive wrapping | Force items to overflow container |
| Test with different content sizes | Assume all items same size |
Flex Direction & Wrap
ការកំណត់ទិស (row, column, reverse) និង wrapping behavior របស់ flexbox។
Align & Justify
ការតម្រឹមធាតុទាំងផ្តេក (justify-content) និងបញ្ឈរ (align-items) ដើម្បីបង្កើត perfect layouts។