Trường công nghệ: CSS Flexbox Explained with Examples – Hướng dẫn trực quan để tạo hàng và cột sạch sẽ Circuit Desk Công nghệ, tháo ra từ từ
VI
  • English
  • Tiếng Việt

    • Trang chủ / Phát Triển Web

    Trường công nghệ: CSS Flexbox Explained with Examples – Hướng dẫn trực quan để tạo hàng và cột sạch sẽ

    27/9/2026 ·

    Trường công nghệ: CSS Flexbox Explained with Examples – Hướng dẫn trực quan để tạo hàng và cột sạch sẽ

    Flexbox là một trong những hệ thống bố cục thực tế nhất trong CSS vì nó cho phép bạn kiểm soát cách các phần tử nằm trong một hàng hoặc cột, cách chúng mở rộng hoặc thu nhỏ, và cách chúng thẳng hàng trên trục chính và trục phụ. Nếu bạn đang xây dựng thanh điều hướng, hàng thẻ, biểu mẫu, hoặc khoảng cách giữa các thành phần, Flexbox cung cấp cho bạn các công cụ dự đoán được với các quy tắc rõ ràng. Trong hướng dẫn này, bạn sẽ thấy các ví dụ nhỏ, trực quan xây dựng từng ý tưởng một, để bạn có thể học bằng cách đọc code và hình dung kết quả.

    Mục tiêu dài hạn ở đây là hiển thị cách sử dụng CSS Flexbox để canh chỉnh phần tử với ví dụ mà bạn có thể thích ứng cho các dự án thực tế. Chúng ta sẽ bắt đầu với container, chuyển sang hành vi của phần tử, sau đó bao gồm căn chỉnh, bọc và các mẫu phổ biến mà bạn có thể tái sử dụng.

    Flexbox thực sự làm gì

    Flexbox hoạt động trên mối quan hệ cha-con. Bạn biến một container thành ngữ cảnh flex, và các con trực tiếp của nó trở thành các phần tử flex. Từ đó, bạn kiểm soát hướng của bố cục, khoảng cách giữa các phần tử, và cách các phần tử thẳng hàng trên hai trục:

    • Trục chính: hướng được đặt bởi flex-direction, thường là ngang trong hàng hoặc dọc trong cột.
    • Trục phụ: hướng vuông góc, nên là dọc trong hàng hoặc ngang trong cột.

    Hiểu các trục này là chìa khóa cho mọi quyết định căn chỉnh. Khi bạn biết trục nào đang nhắm đến, các thuộc tính như justify-content và align-items trở nên đơn giản.

    Bật Flexbox

    Bắt đầu với một container và một vài phần tử. HTML tối thiểu này đủ cho các ví dụ của chúng ta:

    • Một div .container
    • Ba div .item con với nhãn ngắn

    Sau đó đặt container thành display flex. Tại thời điểm này, các phần tử nằm trong một hàng theo mặc định.

    • .container { display: flex; }

    Một quy tắc duy nhất này mang lại cho bạn một hàng các phần tử với khoảng cách đều nếu bạn thêm gap sau đó. Nó cũng làm cho các thuộc tính căn chỉnh khả dụng trên container.

    Hướng và trục chính

    Theo mặc định, flex-direction là row, vì vậy trục chính chạy từ trái sang phải. Bạn có thể đảo trục hoặc thay đổi chế độ bố cục:

    • row: các phần tử chảy theo chiều ngang.
    • row-reverse: các phần tử chảy theo chiều ngang theo thứ tự ngược.
    • column: các phần tử xếp chồng theo chiều dọc.
    • column-reverse: các phần tử xếp chồng theo chiều dọc theo thứ tự ngược.

    Hãy thử ví dụ tinh thần này. Nếu bạn đặt flex-direction: column và cho container chiều cao cố định, bạn có thể phân bổ các phần tử từ trên xuống dưới. Các thuộc tính căn chỉnh giống như bạn sử dụng trong hàng giờ kiểm soát trục chính dọc.

    Khoảng cách dọc theo trục chính

    Khi hướng đã được đặt, justify-content phân phối các phần tử dọc theo trục chính. Các giá trị phổ biến dễ hình dung:

    • flex-start: các phần tử xếp về phía bắt đầu.
    • center: các phần tử căn giữa dọc theo trục chính.
    • flex-end: các phần tử xếp về phía cuối.
    • space-between: phần tử đầu tiên ở đầu, phần tử cuối cùng ở cuối, khoảng cách bằng nhau ở giữa.
    • space-around: khoảng cách bằng nhau xung quanh mỗi phần tử, với nửa khoảng cách ở các cạnh.
    • space-evenly: khoảng cách bằng nhau giữa các phần tử và ở các cạnh.

    Để có khoảng cách sạch sẽ mà không cần đo lường margin, hãy thêm gap vào container. Gap có thể dự đoán được và tránh khoảng cách thêm ở các cạnh, điều này rất tuyệt vời cho lưới và thanh công cụ.

    • .container { display: flex; gap: 12px; }

    Căn chỉnh trục phụ

    Với trục chính đã được xử lý, hãy chuyển sang trục phụ. align-items kiểm soát vị trí các phần tử trên trục phụ:

    • stretch: các phần tử kéo giãn để lấp đầy trục phụ nếu không có kích thước cố định.
    • flex-start: các phần tử thẳng hàng với đỉnh trong hàng.
    • center: các phần tử căn giữa theo chiều dọc trong hàng.
    • flex-end: các phần tử thẳng hàng với đáy trong hàng.
    • baseline: các phần tử thẳng hàng theo đường cơ sở văn bản, rất hữu ích cho nhãn và nút.

    Nếu bạn cần căn chỉnh một phần tử khác với phần còn lại, hãy sử dụng align-self trên phần tử đó. Nó ghi đè cài đặt container cho một phần tử duy nhất đó.

    Bọc và luồng

    Theo mặc định, Flexbox giữ các phần tử trên một dòng. Để cho phép các phần tử chuyển sang dòng mới khi hết không gian, hãy bật bọc:

    • .container { flex-wrap: wrap; }

    Khi bật bọc, container trở thành bố cục flex đa dòng. Kết hợp điều này với gap để giữ khoảng cách nhất quán trên các dòng. Nếu bạn muốn mỗi phần tử mở rộng đều để lấp đầy một hàng, hãy kết hợp bọc với các thuộc tính flex trên các phần tử.

    Kích thước phần tử với flex viết tắt

    Các phần tử flex có thể mở rộng, thu nhỏ và đặt kích thước cơ bản. Viết tắt flex: grow shrink basis làm điều này dễ dàng:

    • flex: 1 1 0; cho phép các phần tử mở rộng đều và chia sẻ không gian.
    • flex: 0 0 auto; giữ các phần tử ở kích thước nội dung của chúng.
    • flex: 1 1 200px; cho phép các phần tử mở rộng và thu nhỏ quanh cơ sở 200px.

    Một quy tắc thực tế là bắt đầu với flex: 1 1 0 cho các cột bằng nhau, hoặc flex: 0 1 auto cho các thẻ giữ chiều rộng tự nhiên và chỉ thu nhỏ khi cần.

    Các ví dụ bố cục phổ biến

    Thanh điều hướng với logo và hành động

    • Đặt container thành display: flex và align-items: center.
    • Đặt logo ở bên trái và nhóm nút ở bên phải.
    • Thêm margin-left: auto vào nhóm nút, hoặc sử dụng justify-content: space-between để đẩy chúng ra xa nhau.
    • Sử dụng gap để phân bổ các liên kết đều nhau.

    Lưới thẻ với các cột bằng nhau

    • Đặt container thành display: flex, flex-wrap: wrap và gap: 16px.
    • Cho mỗi thẻ flex: 1 1 240px để các phần tử bọc ở khoảng 240px và mở rộng để lấp đầy hàng.
    • Sử dụng align-items: stretch để các thẻ trong cùng một hàng có chung chiều cao.

    Nội dung căn giữa trong một phần

    • Đặt container thành display: flex, justify-content: center và align-items: center.
    • Cho container chiều cao cố định hoặc min-height để tạo không gian cho trục phụ hoạt động.

    Thanh bên và nội dung chính

    • Sử dụng container hàng với hai con: .sidebar và .main.
    • Đặt .sidebar { flex: 0 0 260px; } và .main { flex: 1 1 auto; }.
    • Điều này giữ thanh bên cố định trong khi khu vực chính lấp đầy không gian còn lại.

    Các mẫu căn chỉnh bạn sẽ tái sử dụng

    • Căn giữa nhóm nút: container với display: flex, justify-content: center và gap: 8px.
    • Đẩy một phần tử về cuối: thêm margin-left: auto vào phần tử đó, hoặc đặt nó cuối cùng và sử dụng justify-content: space-between.
    • Tạo các cột bằng nhau: các con với flex: 1 1 0 và container với gap.
    • Ngăn tràn: thêm min-width: 0 vào các phần tử nội dung dài để văn bản có thể thu nhỏ thay vì phá vỡ bố cục.

    Khả năng tiếp cận và khả năng thích ứng

    Flexbox không tự thay đổi khả năng tiếp cận, nhưng nó giúp bạn xây dựng thứ tự và khoảng cách hợp lý. Giữ những thói quen này:

    • Duy trì thứ tự DOM hợp lý để điều hướng bằng bàn phím và trình đọc màn hình khớp với bố cục trực quan.
    • Tránh sử dụng order để thay đổi triệt để thứ tự đọc.
    • Sử dụng gap và căn chỉnh nhất quán để các mục tiêu tương tác dễ dàng chạm vào.
    • Ưu tiên các cơ sở linh hoạt như phần trăm hoặc giá trị min/max để nội dung mở rộng tốt.

    Mẹo gỡ lỗi

    Khi bố cục trông sai, hãy kiểm tra những điều này trư���c:

    • Cha có thực sự được đặt thành display: flex không?
    • flex-direction có đúng như bạn mong đợi, hàng hay cột không?
    • Bạn có đặt flex-wrap nếu cần nhiều dòng không?
    • Các phần tử có đang thu nhỏ vì overflow hoặc văn bản dài không? Thử min-width: 0.
    • Bạn có đang trộn justify-content và align-items trên đúng trục không?

    Công cụ DevTools của trình duyệt rất hữu ích. Hầu hết các công cụ hiển thị các trục flex và cho phép bạn chuyển đổi giá trị căn chỉnh theo thời gian thực, điều này giúp học nhanh hơn.

    Khi nào nên chọn Flexbox

    Chọn Flexbox cho bố cục một chiều: một hàng hoặc một cột, ngay cả khi hàng đó bọc.对于 hai chiều lưới nơi bạn cần theo dõi hàng và cột chính xác, CSS Grid có thể phù hợp hơn. Trong thực tế, nhiều trang sử dụng cả hai: Grid cho khung trang và Flexbox cho các thành phần như header, thanh công cụ và bên trong thẻ.

    Với những ví dụ này, bạn bây giờ biết cách sử dụng CSS Flexbox để canh chỉnh phần tử với ví dụ mà bạn có thể sao chép và thích ứng. Bắt đầu với hướng và trục, thêm căn chỉnh, sau đó tinh chỉnh kích thước với các thuộc tính flex. Khi bạn nội hóa mô hình trục, Flexbox trở thành một công cụ bình tĩnh, đáng tin cậy cho các hàng và cột sạch sẽ trong bất kỳ giao diện nào.

    Bài liên quan