CSS Flexbox: Dàn Trang Linh Hoạt Cho Website Hiện Đại

Trước đây, việc thiết kế web, đặc biệt là dàn trang layout, menu và chia cột, thường dựa vào các thuộc tính như float kết hợp với clear float. Tuy nhiên, phương pháp này gặp nhiều khó khăn khi cần responsive và hiển thị trên nhiều thiết bị khác nhau, đòi hỏi chỉnh sửa code phức tạp và tốn thời gian.

Một giải pháp nhanh hơn là sử dụng các CSS Framework như Bootstrap. Mặc dù tiện lợi, cách này có thể khiến website chứa nhiều đoạn code “dư thừa” không cần thiết, ảnh hưởng đến tốc độ tải trang.

Sự ra đời của Flexbox đã giải quyết những vấn đề này, mang đến một phương pháp dàn trang và căn chỉnh các thành phần linh hoạt, dễ dàng và tiết kiệm thời gian hơn.

Bài viết này sẽ giúp bạn khám phá sức mạnh của CSS Flexbox, tìm hiểu cách sử dụng và những thuộc tính nổi bật của nó, lý giải vì sao Flexbox ngày càng được ưa chuộng để thay thế cho float hay inline.

Thuộc Tính Display: Flex

Để kích hoạt Flexbox trong CSS, bạn chỉ cần sử dụng thuộc tính display: flex. Hãy xem xét một layout đơn giản như sau để dễ hình dung:

Và CSS tương ứng:

.box {
  display: flex;
  width: 100%;
  background-color: #1a1c28;
  height: auto;
}

.item {
  width: 150px;
  height: 150px;
}

.item:nth-of-type(1) {
  background-color: #bf4470;
}

.item:nth-of-type(2) {
  background-color: #ffa400;
}

.item:nth-of-type(3) {
  background-color: #07a787;
}

Kết quả sẽ là:

See the Pen
CSS Flexbox by EvonDev (@blackzero)
on CodePen.

Tiếp theo, chúng ta sẽ đi sâu vào các thuộc tính khác của CSS Flexbox, kèm theo hình minh họa để bạn dễ hình dung. Mỗi thuộc tính sẽ được giải thích chi tiết, nếu có bất kỳ thắc mắc nào, đừng ngần ngại để lại bình luận bên dưới.

Hãy nhớ kiểm tra code trên Codepen và thực hành trực tiếp để hiểu rõ cách hoạt động của Flexbox. Việc thực hành sẽ giúp bạn nắm vững kiến thức hơn là chỉ đọc lý thuyết suông.

Thuộc Tính Flex-direction

Flex-direction xác định hướng của các item trong container. Trong Flexbox, có hai trục chính: trục X (ngang) và trục Y (dọc), tương tự như hệ tọa độ trong toán học. Lưu ý rằng Flexbox chỉ hiển thị theo một trong hai hướng này, không hỗ trợ hiển thị đồng thời cả hai hướng như CSS Grid.

Trục X và Y trong FlexboxTrục X và Y trong Flexbox

Mặc định, các item trong Flexbox được sắp xếp theo trục X, từ trái sang phải. Đó là lý do tại sao khi sử dụng display: flex ở ví dụ trên, các item được hiển thị thành hàng ngang theo thứ tự từ trái qua phải.

Flex-direction có bốn giá trị chính: row, row-reverse, column và column-reverse. Bạn nên thử từng thuộc tính này trên Codepen để thấy rõ sự khác biệt so với hình minh họa.

  • flex-direction: row: Đây là giá trị mặc định. Các item được sắp xếp theo chiều ngang (trục X) và hiển thị từ trái sang phải.

    Flex Direction RowFlex Direction Row

  • flex-direction: row-reverse: Tương tự như flex-direction: row, nhưng các item được hiển thị từ phải sang trái.

    Flex Direction Row ReverseFlex Direction Row Reverse

  • flex-direction: column: Các item được sắp xếp theo chiều dọc (trục Y) và hiển thị từ trên xuống dưới.

    Flex Direction ColumnFlex Direction Column

  • flex-direction: column-reverse: Giống như flex-direction: column, nhưng các item được hiển thị từ dưới lên trên.

    Flex Direction Column ReverseFlex Direction Column Reverse

Thuộc Tính Flex-wrap

Hãy thay đổi kích thước trình duyệt khi xem các demo Codepen dưới đây để thấy rõ sự khác biệt.

Flex-wrap cho phép các item tự động xuống hàng hoặc vẫn giữ nguyên trên một hàng duy nhất khi kích thước container thay đổi. Để dễ hiểu hơn, hãy xem các ví dụ sau.

Flex-wrap có ba giá trị: wrap, nowrap và wrap-reverse.

Giá trị mặc định là nowrap, do đó bạn không cần thiết lập thuộc tính này. Khi bạn thay đổi kích thước trình duyệt và sử dụng flex-wrap: nowrap, các item sẽ tự động co lại thay vì xuống hàng. Điều này có thể làm cho nội dung bên trong bị ép lại, gây ảnh hưởng đến giao diện.

See the Pen
CSS Flexbox by EvonDev (@blackzero)
on CodePen.

flex-wrap: wrap: Ngược lại với flex-wrap: nowrap, khi kích thước container thay đổi và tổng chiều rộng của các item lớn hơn chiều rộng của container, các item sẽ tự động xuống hàng.

Ví dụ, trong demo Codepen dưới đây, có 3 item, mỗi item rộng 150px. Độ rộng của container là 100% khung hiển thị. Khi bạn thay đổi kích thước trình duyệt và khung container nhỏ lại, item thứ ba (màu xanh lá) sẽ tự động xuống hàng.

See the Pen
CSS Flexbox wrap by EvonDev (@blackzero)
on CodePen.

Cuối cùng là flex-wrap: wrap-reverse: Tương tự như flex-wrap: wrap, nhưng thay vì item xuống dưới, nó sẽ lên trên. Hãy thử thay đổi kích thước trình duyệt để thấy rõ sự khác biệt.

See the Pen
CSS Flexbox wrap-reverse by EvonDev (@blackzero)
on CodePen.

Đôi khi, bạn có thể thấy thuộc tính flex-flow: row wrap. Thuộc tính này được sử dụng để gộp hai thuộc tính flex-direction và flex-wrap lại. Cú pháp là flex-flow: flex-direction flex-wrap. Bạn chỉ cần thay thế các giá trị tương ứng cho flex-direction và flex-wrap.

Tạm Kết

Bài viết này đã khá dài, và tôi muốn giải thích chi tiết để bạn dễ hiểu. Vì vậy, tôi sẽ chia bài về Flexbox này thành 5 phần (4 phần lý thuyết và 1 phần thực hành) để bạn dễ theo dõi và không cảm thấy quá tải khi đọc một bài viết quá dài.

Trong bài tiếp theo, chúng ta sẽ tìm hiểu về 4 thuộc tính khác: justify-content, align-items, align-self và order. Hãy nhớ đón đọc nhé. Nếu bạn có bất kỳ ý kiến, góp ý hoặc thắc mắc nào, đừng ngần ngại để lại bình luận bên dưới. Chúc bạn một ngày tốt lành!