Frontend Hub/CSS Course
Bài học: CSS Flexbox

Course Content

CSS Fundamentals

Layout Cơ Bản

CSS Flexbox

🧩 CSS Flexbox Layout

Học cách tạo layout linh hoạt và responsive với CSS Flexbox - công cụ mạnh mẽ nhất để sắp xếp elements

💡 Flexbox là gì? CSS Flexbox (Flexible Box Layout) là một phương pháp layout một chiều giúp phân phối không gian và căn chỉnh items trong container một cách hiệu quả.

Flex Container & Items

📦 Flex Container (Parent)

  • • Element với display: flex
  • • Định nghĩa main axis và cross axis
  • • Kiểm soát cách items được sắp xếp
  • • Chứa các flex items

🧩 Flex Items (Children)

  • • Direct children của flex container
  • • Có thể grow, shrink, và có basis size
  • • Có thể tự align riêng biệt
  • • Có thể thay đổi thứ tự hiển thị

⚡ Tại sao dùng Flexbox?

  • • Perfect centering: Dễ dàng center theo cả 2 chiều
  • • Equal heights: Tự động chiều cao bằng nhau
  • • Space distribution: Phân phối không gian linh hoạt
  • • Responsive: Tự động adapt với screen size
  • • Order control: Thay đổi thứ tự không cần sửa HTML

Flex Container & Items cơ bản

/* Tạo flex container */
.flex-container {
  display: flex;
  border: 2px solid #007bff;
  padding: 10px;
  gap: 10px;
}

/* Flex items */
.flex-item {
  background-color: #e7f3ff;
  padding: 20px;
  text-align: center;
  border: 1px solid #007bff;
  border-radius: 4px;
}

🎯 Flexbox Best Practices & Summary

✅ Do's - Nên làm

  • • Dùng flexbox cho 1D layouts (một chiều)
  • • Kết hợp với CSS Grid cho layouts phức tạp
  • • Dùng gap thay vì margin khi có thể
  • • Test trên nhiều kích thước màn hình
  • • Dùng flex shorthand (flex: 1) thay vì các properties riêng
  • • Sử dụng flexbox cho navigation, cards, centering

❌ Don'ts - Tránh làm

  • • Không dùng flexbox cho 2D layouts phức tạp
  • • Tránh nested flex containers không cần thiết
  • • Không quên thiết lập flex-basis khi cần
  • • Tránh dùng float với flexbox
  • • Không ignore accessibility với order
  • • Tránh hardcode width/height khi có flex

🎊 Flexbox vs CSS Grid

Flexbox - 1D Layout
  • • Navigation bars
  • • Card rows/columns
  • • Perfect centering
  • • Component layouts
CSS Grid - 2D Layout
  • • Page layouts
  • • Complex grids
  • • Magazine layouts
  • • Dashboard designs

📋 Flexbox Cheat Sheet

Container Properties

display: flex
flex-direction: row|column
flex-wrap: wrap|nowrap
justify-content: center
align-items: center
gap: 1rem

Item Properties

flex: 1 - Equal distribution
flex: auto - Content-based
flex: none - No flexibility
align-self: center
order: 1

Common Patterns

Perfect center: justify-content + align-items: center
Navbar: justify-content: space-between
Equal cards: flex: 1
Responsive: flex-wrap: wrap

Flexbox là công cụ mạnh mẽ cho layout 1 chiều! Kết hợp với Grid để tạo ra những layout tuyệt vời! 🚀