Photo by Luca Bravo on Unsplash

📐 CSS Flexbox tricks cho layout responsive

⚡ Quick Guide: 5 CSS Flexbox patterns mạnh mẽ giúp bạn tạo responsive layouts chuyên nghiệp. Từ basic alignment đến advanced layout patterns được sử dụng trong production.

CSS Flexbox đã cách mạng hóa cách chúng ta tạo layouts. Dưới đây là những tricks thực tế được sử dụng hàng ngày trong development.

📋 Flexbox Fundamentals

🎯 Tại sao Flexbox quan trọng?

🛠️ 5 Essential Flexbox Tricks

1. 🎯 Perfect Centering Pattern

/* The Holy Grail of CSS - Perfect Centering */
.center-everything {
  display: flex;
  justify-content: center;  /* Horizontal centering */
  align-items: center;      /* Vertical centering */
  min-height: 100vh;        /* Full viewport height */
}

/* Example Usage */
.hero-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

2. 📱 Auto-Responsive Card Grid

/* Cards that automatically wrap and resize */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

.card {
  flex: 1 1 300px;  /* grow, shrink, basis */
  min-width: 300px;
  max-width: 400px;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Result: Cards automatically arrange in rows */
/* 1 card per row on mobile, 2-3 on tablet, 3+ on desktop */

3. 🏗️ Sticky Footer Layout

/* Page layout with header, content, footer */
.page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  flex-shrink: 0;    /* Don't shrink */
  padding: 1rem;
  background: #333;
}

.main-content {
  flex: 1;           /* Take all available space */
  padding: 2rem;
}

.footer {
  flex-shrink: 0;    /* Don't shrink */
  padding: 1rem;
  background: #666;
  margin-top: auto;  /* Push to bottom */
}

4. ⚖️ Equal Height Columns

/* Columns that always have same height */
.equal-columns {
  display: flex;
  gap: 2rem;
  padding: 2rem;
}

.column {
  flex: 1;              /* Equal width */
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
}

/* Advanced: Different ratios */
.column-1 { flex: 2; }  /* 2x wider */
.column-2 { flex: 1; }  /* Normal width */
.column-3 { flex: 1; }  /* Normal width */

5. 🎛️ Navigation Bar Patterns

/* Modern navbar with logo left, menu center, actions right */
.navbar {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  flex-shrink: 0;       /* Don't shrink logo */
}

.nav-menu {
  flex: 1;              /* Take available space */
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.nav-actions {
  flex-shrink: 0;       /* Don't shrink actions */
  display: flex;
  gap: 1rem;
}

/* Mobile-first responsive nav */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
  
  .nav-menu {
    justify-content: center;
    flex-wrap: wrap;
  }
}

🚀 Advanced Flexbox Patterns

Flexbox Property Cheatsheet

Property	Values	Use Case
justify-content	flex-start, center, space-between	Horizontal alignment
align-items	stretch, center, flex-start	Vertical alignment
flex-direction	row, column, row-reverse	Layout direction
flex-wrap	nowrap, wrap, wrap-reverse	Item wrapping
flex	1, 0 1 auto, 1 1 300px	Item sizing

⚡ Quick Implementation Tips

🎯 Real-World Example

<!-- Complete responsive card layout -->
<div class="product-grid">
  <div class="product-card">
    <img src="product1.jpg" alt="Product 1">
    <div class="card-content">
      <h3>Product Name</h3>
      <p>Product description here...</p>
      <div class="card-footer">
        <span class="price">$99</span>
        <button class="btn-primary">Add to Cart</button>
      </div>
    </div>
  </div>
  <!-- More cards... -->
</div>

.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 2rem;
}

.product-card {
  flex: 1 1 280px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

.card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 1rem;
}

---

Thực hành ngay với CodePen hoặc project của bạn!

---

Những patterns này được sử dụng trong production và đã được test kỹ lưỡng về browser compatibility.