CSS Layout Hiện Đại – Flexbox và CSS Grid

Flexbox và CSS Grid là hai công cụ layout hiện đại, mạnh mẽ, thay thế hầu hết các phương pháp truyền thống như float. Đây là nền tảng để xây dựng giao diện web chuẩn mực, linh hoạt và dễ quản lý.

1. Nội dung chính

• Flexbox cơ bản: main-axis, cross-axis, justify-content, align-items
• Flexbox nâng cao: flex-grow, flex-shrink, flex-basis, align-self, order
• CSS Grid cơ bản: tạo grid, grid-template-columns, rows, gap
• CSS Grid nâng cao: template areas, auto-fit, auto-fill, minmax(), fr unit

2. Ví dụ

/* Flexbox cơ bản */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Flexbox nâng cao */
.item {
  flex: 1;               /* grow */
  flex-basis: 200px;     /* width mặc định */
  order: 2;              /* thay đổi thứ tự */
}

/* Grid cơ bản */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* Grid nâng cao */
.grid-advanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-areas:
    "header header"
    "sidebar content";
}

Ví dụ Flexbox - Navigation bar

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #333;
  color: white;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

Ví dụ Grid - Responsive card layout

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Ví dụ Grid với template areas

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: 1rem;
  height: 100vh;
}

.header { grid-area: header; background: #3498db; }
.sidebar { grid-area: sidebar; background: #2c3e50; }
.content { grid-area: content; background: #ecf0f1; }
.footer { grid-area: footer; background: #34495e; }

3. Kiến thức trọng tâm

💡 GHI NHỚ: Flexbox xử lý layout theo một chiều (ngang hoặc dọc), phù hợp cho header, nav, card list

💡 GHI NHỚ: Grid xử lý layout hai chiều, lý tưởng cho bố cục trang phức tạp

💡 GHI NHỚ: flex-basis, flex-grow, flex-shrink giúp chia không gian linh hoạt và kiểm soát độ co giãn

💡 GHI NHỚ: Grid hỗ trợ unit fr, auto-fit, auto-fill giúp tạo layout responsive đơn giản, ít media queries

💡 GHI NHỚ: Kết hợp Flexbox (bên trong) và Grid (bên ngoài) là mô hình bố cục phổ biến trong dự án thực tế

4. Bài tập nhanh

1. Tạo một thanh navigation sử dụng Flexbox, căn giữa theo trục ngang và dọc:

<nav class="flex-nav">
  <div class="logo">Brand</div>
  <div class="nav-items">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
  </div>
</nav>

.flex-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-items {
  display: flex;
  gap: 1rem;
}

2. Tạo layout 3 cột bằng Grid, khoảng cách 20px, và tự động co giãn theo chiều ngang:

.three-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Responsive: chuyển thành 2 cột trên màn hình nhỏ */
@media (max-width: 768px) {
  .three-column-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .three-column-grid {
    grid-template-columns: 1fr;
  }
}

3. Ứng dụng Grid nâng cao: tạo layout gồm header – sidebar – content – footer với grid-template-areas:

.advanced-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  min-height: 100vh;
}

@media (max-width: 768px) {
  .advanced-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr auto auto;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

5. Kết luận

Flexbox và Grid là hai công cụ layout hiện đại giúp đơn giản hóa việc thiết kế giao diện. Nắm vững cả hai sẽ giúp bạn xây dựng bố cục linh hoạt, mạch lạc và dễ bảo trì, phù hợp cho các dự án ở quy mô lớn.