CSS Flexbox: Kiên Nhẫn Đổi Mới Trong Thiết Kế Giao Diện

Bạn có bao giờ gặp khó khăn khi muốn sắp xếp các phần tử sao cho chúng hiển thị cùng một hàng mà không đẩy các phần tử khác xuống dưới hay muốn chúng tự động lấp đầy toàn bộ không gian của phần tử cha nhưng lại gặp vấn đề với khoảng trắng xuất hiện giữa các phần tử khi sử dụng inline-block? Hoặc bạn đang gặp khó khăn trong việc tạo ra bố cục đáp ứng đa dạng màn hình bằng cách sử dụng float và position?

Đừng lo lắng! Bài viết hôm nay sẽ giới thiệu đến bạn một công cụ mạnh mẽ trong việc thiết kế giao diện - **Flexbox (Bố cục linh hoạt)**, một giải pháp giúp thay đổi hoàn toàn cách bạn hiểu về bố cục CSS.

Giải Thích Về Luồng Tài Liệu (Document Flow)

Trong HTML, mỗi phần tử đều hoạt động như dòng chảy của nước, tuân theo luồng tài liệu mặc định gọi là **Luồng tài liệu (Document Flow)**.

  • Phần tử khối (block): Ví dụ như <div>, <p>, chiếm toàn bộ chiều rộng của dòng và các phần tử khác phải xuống dòng mới được hiển thị.
  • Phần tử nội tuyến (inline): Ví dụ như <span>, <a>, nằm cạnh nhau trên cùng một dòng nhưng không thể điều chỉnh chiều rộng và chiều cao.
  • Phần tử nội tuyến khối (inline-block): Kết hợp cả hai đặc điểm trên, nhưng lại gặp vấn đề với khoảng trắng không mong muốn do ký tự xuống dòng.
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

Dù bạn đã đặt width: 33.33% cho mỗi phần tử, chúng vẫn khó đạt được việc phân bổ đều trên một hàng do khoảng trắng giữa các phần tử.

Flexbox: Cập Nhật Bộ Sưu Tập Công Cụ Bố Layout Của Bạn

Khi sử dụng display: flex, bạn như trang bị cho phần tử cha một hệ thống thanh đàn hồi thông minh, khiến các phần tử con tự động điều chỉnh kích thước, căn chỉnh và xuống dòng.

HTML Cấu Trúc Hoàn Chỉnh

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bố cục Linh Hoạt</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            background-color: green;
            height: 100px;
            width: 50%;
            margin-bottom: 10px;
        }
        .container:nth-child(2) {
            background-color: blue;
        }
        .item {
            flex: 1;
            font-size: 20px;
            color: black;
        }
        .item:nth-child(odd) {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div><div class="item">2</div><div class="item">3</div>
    </div>
    <div class="container"></div>
</body>
</html>

Bạn có hai phần tử .container, trong đó phần tử đầu tiên chứa ba phần tử con .item.

Phân Tích Các Thuộc Tính Chính

1. display: flex;

Đây là lệnh mở khóa cho bố cục linh hoạt!

.container {
    display: flex;
}

Sau khi thiết lập, .container trở thành một **công trình linh hoạt (Flex Container)**, tất cả các phần tử con trực tiếp (.item) tự động trở thành **mục linh hoạt (Flex Items)** và được sắp xếp ngang hàng (theo hướng mặc định).

2. flex: 1;

Là chỉ dẫn linh hoạt quan trọng nhất!

.item {
    flex: 1;
}

flex: 1 là viết tắt của flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Nói cách đơn giản, nó có nghĩa là **"Chia sẻ may mắn và khó khăn chung"** - tất cả các mục sẽ phân bổ đều không gian còn lại của công trình linh hoạt.

3. Các kiểu dáng hỗ trợ khác

  • background-color, height, width: Điều khiển ngoại hình và kích thước.
  • margin-bottom: Để mỗi .container có không gian hít thở phía dưới.
  • :nth-child(odd): Chọn mục ở vị trí lẻ, ví dụ mục thứ 1, 3, v.v., và làm nổi bật bằng màu nền vàng.

Những Thuộc Tính Đặc Biệt Của Flex: Điều Khiển Bố Layout Như Một Nhà Hùng Hành Trình

1. flex-direction: Xác Định Hướng Sắp Xếp

Mặc định, mục linh hoạt được sắp xếp từ trái sang phải (theo chiều ngang), nhưng bạn có thể dễ dàng thay đổi hướng!

.container {
    display: flex;
    flex-direction: row;          /* Ngang (mặc định) → */
    flex-direction: column;       /* Dọc ↓ */
    flex-direction: row-reverse;  /* Ngược ngang ← */
    flex-direction: column-reverse; /* Ngược dọc ↑ */
}

2. justify-content: Điều Khiển Căn Chỉnh Trên Trục Chính (Ngang)

Thuộc tính này dùng để thiết lập cách căn chỉnh trên trục chính (theo chiều ngang).

.container {
    justify-content: flex-start;    /* Mặc định, căn trái */
    justify-content: center;        /* Căn giữa */
    justify-content: flex-end;      /* Căn phải */
    justify-content: space-between; /* Căn hai đầu, khoảng cách giữa bằng nhau */
    justify-content: space-around;  /* Phân bổ đều, hai bên có khoảng trắng */
    justify-content: space-evenly;  /* Phân bổ hoàn toàn đều */
}

3. align-items: Điều Khiển Căn Chỉnh Trên Trục Chéo (Dọc)

Nếu trục chính là chiều ngang, thì trục chéo sẽ là chiều dọc. align-items kiểm soát cách các mục căn chỉnh trên trục chéo.

.container {
    align-items: stretch;    /* Mặc định, kéo dài để lấp đầy chiều cao của công trình */
    align-items: flex-start; /* Căn trên cùng */
    align-items: center;     /* Căn giữa theo chiều dọc */
    align-items: flex-end;   /* Căn dưới cùng */
    align-items: baseline;   /* Căn theo đường cơ sở chữ */
}

4. Trục Chính và Trục Chéo: Hiểu Hệ Tọa Độ Của Flex

Tình huống Trục chính (justify-content) Trục chéo (align-items)
flex-direction: row Chiều ngang ←→ Chiều dọc ↑↓
flex-direction: column Chiều dọc ↑↓ Chiều ngang ←→

5. flex: 1 Của Mục Con Phát Triển Thêm

Chúng ta nói rằng flex: 1 là "chia sẻ không gian", thực tế nó phụ thuộc vào ba yếu tố:

flex: 1; /* Tương đương với */
flex-grow: 1;    /* Khi không gian thừa, có co giãn không (1=có thể co giãn) */
flex-shrink: 1;  /* Khi không gian thiếu, có thu nhỏ không (1=có thể thu nhỏ) */
flex-basis: 0%;  /* Kích thước cơ sở (0% nghĩa là phân chia không gian dựa trên tỷ lệ trước, sau đó phân bổ nội dung) */

6. Khẳng Định Cốt Lõi Của Bố Layout Flex

Công trình định hướng, mục phân chia không gian;
Trục chính xem xét justify, trục chéo dựa vào align;
Muốn chia sẻ không gian đồng đều? flex: 1 đơn giản nhất!

7. Mẹo Thực Chiến

  1. Thêm display: flex cho phần tử cha.
  2. Sử dụng flex: n cho mục con để kiểm soát tỷ lệ.
  3. Sử dụng justify-content để căn chỉnh trên trục chính (ví dụ space-between).
  4. Sử dụng align-items để căn chỉnh trên trục chéo (ví dụ căn giữa).
.container {
    display: flex;
    justify-content: space-between; /* Căn hai đầu */
    align-items: center;           /* Căn giữa theo chiều dọc */
}

Flexbox So Với Inline-Block: Ai Là Vương H técn?

Thuộc tính inline-block flex
Có thể thiết lập chiều rộng và chiều cao Có Có
Có thể nằm cùng một hàng Có Có
Vấn đề khoảng trắng trắng Có Không
Khó khăn căn giữa Nặng (cần line-height hoặc transform) Dễ (sử dụng justify-content / align-items)
Hỗ trợ đáp ứng đa dạng Trung bình Ngũ lực
Chi phí học tập Nhỏ Trung bình

Kết luận: Flexbox mạnh mẽ hơn, hiện đại hơn và phù hợp hơn cho các bố cục phức tạp!

Thẻ: css flexbox responsive-design

Đăng vào ngày 18 tháng 6 lúc 04:27

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn