Flexbox CSS: Hướng Dẫn Toàn Tập & Ví Dụ Trực Quan từ A-Z

Bạn đã bao giờ cảm thấy bối rối khi phải căn chỉnh các phần tử trên trang web chưa? Với Flexbox CSS, việc sắp xếp layout sẽ trở nên đơn giản và linh hoạt hơn bao giờ hết. Đây là công cụ nền tảng giúp bạn làm chủ việc dàn trang theo một chiều một cách trực quan. Trong bài viết này, WiWeb sẽ cùng bạn tìm hiểu toàn bộ về Flexbox, từ các khái niệm cốt lõi đến những ví dụ thực tế dễ áp dụng nhất.

Giới thiệu Flexbox CSS

Trước khi đi sâu vào các thuộc tính, chúng ta cần nắm vững những khái niệm cơ bản. Hiểu rõ nền tảng sẽ giúp bạn sử dụng Flexbox CSS một cách hiệu quả và tự tin hơn rất nhiều.

Flexbox là gì?

Flexbox, hay Flexible Box Layout, là một mô hình layout trong CSS được thiết kế để sắp xếp các phần tử theo một chiều duy nhất. Bạn có thể hiểu đơn giản là sắp xếp chúng trên một hàng ngang hoặc một cột dọc. Sức mạnh của Flexbox nằm ở khả năng phân phối không gian và căn chỉnh các phần tử một cách linh hoạt, ngay cả khi kích thước của chúng không xác định.

Đây là giải pháp hoàn hảo cho việc xây dựng các thành phần giao diện như thanh điều hướng, danh sách sản phẩm, hay bất kỳ cụm phần tử nào cần được sắp xếp gọn gàng.

Các thuật ngữ cốt lõi cần nắm

Để làm việc với Flexbox, bạn cần làm quen với vài thuật ngữ quan trọng:

• Flex Container: Là phần tử cha bao bọc các phần tử con. Bạn “kích hoạt” Flexbox bằng cách gán display: flex cho phần tử này.
• Flex Items: Là các phần tử con nằm trực tiếp bên trong Flex Container.
• Main Axis (Trục chính): Đây là trục chính mà các flex item được sắp xếp. Mặc định, đây là trục ngang (từ trái sang phải).
• Cross Axis (Trục phụ): Đây là trục vuông góc với trục chính. Nếu trục chính là hàng ngang, trục phụ sẽ là cột dọc.

Nắm vững hai trục này là chìa khóa để hiểu cách justify-content và align-items hoạt động.

Sự khác biệt chính giữa Flexbox và Grid

Đây là câu hỏi rất phổ biến. Flexbox vs Grid không phải là cuộc chiến ai hơn ai, mà là chọn đúng công cụ cho đúng việc.

• Flexbox được thiết kế cho layout một chiều (một hàng hoặc một cột). Nó rất lý tưởng để sắp xếp các thành phần nhỏ trong giao diện.
• CSS Grid được thiết kế cho layout hai chiều (cả hàng và cột cùng lúc). Nó phù hợp hơn để dàn layout tổng thể của cả một trang web.

Một quy tắc đơn giản: hãy dùng Flexbox cho các thành phần, và dùng Grid cho bố cục tổng thể.

Thuộc tính cho Flex Container

Mọi thứ trong Flexbox bắt đầu từ phần tử cha, hay còn gọi là Flex Container. Bằng cách áp dụng các thuộc tính cho container, bạn có thể kiểm soát hướng, cách sắp xếp, và căn chỉnh của tất cả các phần tử con bên trong.

Làm thế nào để bắt đầu với Flexbox?

Bước đầu tiên và quan trọng nhất là biến một phần tử thành flex container. Rất đơn giản, bạn chỉ cần thêm thuộc tính này vào CSS của phần tử cha:

.container {
  display: flex;
}

Ngay lập tức, các phần tử con bên trong .container sẽ trở thành flex items và được xếp trên một hàng.

flex-direction

Thuộc tính này xác định trục chính. Nó quyết định các item sẽ được xếp theo chiều ngang hay chiều dọc.

• row (mặc định): Các item xếp thành hàng ngang, từ trái sang phải.
• row-reverse: Xếp thành hàng ngang, nhưng từ phải sang trái.
• column: Các item xếp thành cột dọc, từ trên xuống dưới.
• column-reverse: Xếp thành cột dọc, nhưng từ dưới lên trên.

flex-wrap

Mặc định, các flex item sẽ cố gắng co lại để nằm gọn trên một hàng. Nếu bạn muốn chúng xuống dòng khi không đủ không gian, flex-wrap sẽ giúp bạn.

• nowrap (mặc định): Các item không xuống dòng, chúng sẽ bị tràn ra ngoài.
• wrap: Các item sẽ tự động xuống dòng khi cần thiết.
• wrap-reverse: Tương tự wrap nhưng các dòng mới sẽ được xếp từ dưới lên.

justify-content

Đây là một trong những thuộc tính mạnh mẽ nhất, dùng để căn chỉnh các item dọc theo trục chính (main axis). Nó giúp phân phối không gian thừa.

• flex-start (mặc định): Căn các item về phía đầu trục chính.
• flex-end: Căn các item về phía cuối trục chính.
• center: Căn các item vào giữa trục chính.
• space-between: Phân bổ không gian đều giữa các item. Item đầu tiên và cuối cùng nằm sát cạnh container.
• space-around: Phân bổ không gian đều xung quanh mỗi item.
• space-evenly: Phân bổ không gian đều, kể cả khoảng cách ở hai đầu.

align-items

Nếu justify-content dành cho trục chính, thì align-items dùng để căn chỉnh các item trên trục phụ (cross axis).

• stretch (mặc định): Các item sẽ kéo dài để lấp đầy container theo trục phụ.
• flex-start: Căn các item về phía đầu trục phụ.
• flex-end: Căn các item về phía cuối trục phụ.
• center: Căn các item vào giữa trục phụ.
• baseline: Căn các item theo đường baseline của văn bản bên trong chúng.

align-content

Lưu ý quan trọng: Thuộc tính này chỉ có tác dụng khi có nhiều hàng/cột được tạo ra bởi flex-wrap: wrap. Nó dùng để căn chỉnh khoảng cách giữa các hàng/cột đó với nhau.

Cách hoạt động của nó tương tự justify-content nhưng áp dụng cho trục phụ.

Flex Items: Thuộc tính cho các Phần tử Con

Sau khi đã điều khiển được container, giờ là lúc tìm hiểu cách kiểm soát từng flex item riêng lẻ. Các thuộc tính này mang lại sự linh hoạt đáng kinh ngạc, cho phép bạn ghi đè các cài đặt chung từ container.

order

Bạn muốn một item hiển thị ở vị trí khác mà không cần thay đổi cấu trúc HTML? Thuộc tính order chính là thứ bạn cần. Mặc định, tất cả các item đều có order: 0. Item có số order nhỏ hơn sẽ được hiển thị trước.

.item-1 { order: 2; } /* Hiển thị sau */
.item-2 { order: 1; } /* Hiển thị trước */

flex-grow

Thuộc tính này xác định khả năng một item có thể “lớn lên” nếu có không gian trống trong container. Nó nhận một giá trị số không có đơn vị.

Nếu tất cả các item có flex-grow: 1, chúng sẽ chia đều không gian còn lại. Nếu một item có flex-grow: 2, nó sẽ chiếm gấp đôi không gian thừa so với các item khác.

flex-shrink

Ngược lại với flex-grow, flex-shrink xác định khả năng một item có thể “co lại” khi không gian trong container bị thiếu. Mặc định, giá trị là 1, nghĩa là các item sẽ co lại một cách tương đối.

flex-basis

Thuộc tính này xác định kích thước mặc định của một item trước khi không gian được phân phối. Nó có thể là một giá trị độ dài (px, %, em) hoặc từ khóa auto. Nó giống như việc bạn đặt width hoặc height cho item (tùy thuộc vào flex-direction).

align-self

Đây là một thuộc tính cực kỳ hữu ích. Nó cho phép một item đơn lẻ tự căn chỉnh trên trục phụ, ghi đè lên giá trị align-items của container. Các giá trị của nó giống hệt align-items (auto, flex-start, flex-end, center, baseline, stretch).

Các Trường Hợp Sử Dụng Phổ Biến (Ví dụ thực tế)

Lý thuyết là vậy, nhưng sức mạnh thực sự của Flexbox chỉ thể hiện qua các ví dụ thực tế. Dưới đây là một vài css flexbox examples phổ biến mà bạn sẽ gặp hàng ngày.

Làm cách nào để căn giữa một div bằng Flexbox (cả chiều ngang và dọc)?

Đây là bài toán kinh điển trong CSS. Với Flexbox, việc này trở nên dễ dàng không ngờ. Bạn chỉ cần 2 dòng CSS cho container:

.parent {
  display: flex;
  justify-content: center; /* Căn giữa theo chiều ngang */
  align-items: center;     /* Căn giữa theo chiều dọc */
  height: 100vh; /* Cần có chiều cao để căn dọc */
}

Chỉ vậy thôi! Phần tử con bên trong sẽ được căn vào chính giữa.

Xây dựng thanh điều hướng (Navigation Bar) responsive

Flexbox là công cụ hoàn hảo để tạo một thanh điều hướng linh hoạt. Bạn có thể dễ dàng đẩy logo sang một bên và các liên kết sang bên còn lại.

.nav-bar {
  display: flex;
  justify-content: space-between; /* Đẩy các nhóm item ra hai đầu */
  align-items: center;
}

Khi chuyển sang màn hình nhỏ, bạn chỉ cần thay đổi flex-direction thành column trong media query để tạo ra một menu di động thân thiện. Đây là một cách tuyệt vời để xây dựng responsive layout with flexbox.

Tạo layout dạng thẻ (Card Layout) linh hoạt, tự động sắp xếp

Bạn có một danh sách các thẻ sản phẩm và muốn chúng tự động sắp xếp và xuống dòng? Flexbox và flex-wrap là bộ đôi hoàn hảo cho nhiệm vụ này.

.card-container {
  display: flex;
  flex-wrap: wrap; /* Cho phép các thẻ xuống dòng */
  gap: 16px; /* Tạo khoảng cách giữa các thẻ */
}

.card {
  flex-grow: 1; /* Các thẻ sẽ lớn lên để lấp đầy hàng */
  flex-basis: 250px; /* Kích thước tối thiểu của mỗi thẻ */
}

Với đoạn code trên, các thẻ sẽ tự động điều chỉnh số lượng trên mỗi hàng tùy thuộc vào chiều rộng của màn hình.

Giải đáp các câu hỏi thường gặp (FAQ)

Khi mới bắt đầu, chắc hẳn bạn sẽ có một vài thắc mắc. WiWeb đã tổng hợp và giải đáp một số câu hỏi thường gặp nhất về Flexbox.

Bảng tóm tắt nhanh các thuộc tính Flexbox

Để giúp bạn dễ dàng tra cứu, WiWeb đã chuẩn bị một bảng tóm tắt nhanh các thuộc tính quan trọng nhất. Hãy coi đây là một flexbox cheatsheet tiện lợi cho các dự án của bạn.

Lời kết

Việc làm chủ Flexbox sẽ mở ra cho bạn rất nhiều khả năng trong việc xây dựng giao diện web hiện đại và linh hoạt. Hy vọng qua bài hướng dẫn về flexbox css này của WiWeb, bạn đã có một cái nhìn toàn diện và tự tin hơn khi sử dụng công cụ mạnh mẽ này.

Bạn còn vướng mắc nào với Flexbox không hay có mẹo nào hay muốn chia sẻ? Hãy để lại bình luận bên dưới nhé!

Nếu bạn cần một website chuyên nghiệp để phát triển thương hiệu, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!