Bài 28: Flex trong Bootstrap 4

0
432

Hello cả nhà, hôm nay mình sẽ hướng dẫn các bạn về Flex trong Bootstrap 4 nhé. Sử dụng các class flex sẽ giúp chúng ta điều khiển bố cục của các thành phần trên website dễ dạng hơn đó.

Flexbox

Điểm khác biệt lớn nhất giữa Bootstrap 3 và Bootstrap 4 đó là Bootstrap 4 hiện tại sử dụng khái niệm flexbox mà Bootstrap 3 không có, Bootstrap 4 sử dụng flexbox thay vì float để xử lý layout.

Với Module Layout Flex Box, chúng ta sẽ dễ dàng thiết kế cấu trúc bố cục đáp ứng linh hoạt hơn mà không cần sử dụng float hay position để định vị thành phần.

Nếu bạn mới sử dụng flex, bạn có thể đọc lại về CSS Flex ở trong series học CSS nhé.

Lưu ý: Flexbox không được hỗ trợ trong IE9 và các phiên bản cũ hơn. Nếu bạn yêu cầu hỗ trợ IE8-9, hãy sử dụng Bootstrap 3. Đây là phiên bản ổn định nhất của Bootstrap và nó vẫn được hỗ trợ cho các vấn đề quan trọng. Tuy nhiên, không có tính năng mới nào được thêm vào nó.

Cách tạo Flexbox

Để tạo 1 vùng chứa flexbox và chuyển đổi các thành phần con thành các mục flex, sử dụng class .d-flex.

Ví dụ như sau:

Hiển thị kết quả:

Để tạo các flexbox dạng inline, sử dụng thêm class .d-inline-flex, như sau:

Tạo các Flexbox ngang

Sử dụng class .flex-row để hiển thị các items flex theo chiều ngang. Nếu không sử dụng thì các Flexbox cũng đã mặc định hiển thị như vậy rồi.

Sử dụng class .flex-row-reverse để căn các thành phần sang phải, như sau:

Flexbox với các item dọc

Sử dụng class .flex-column để hiển thị các item theo chiều dọc từ trên xuống, hoặc class .flex-column-reverse để hiển thị các item ngược lại, như sau:

Hiển thị:

Căn chỉnh nội dung Flex

Để căn chỉnh, các bạn sử dụng class .justify-content-* để thay đổi vị trí các item. Giá trị * có thể là:

  • start: giá trị mặc định
  • end
  • center
  • between
  • around

Ví dụ:

Hiển thị ví dụ là hiểu nhất nhé:

Flex Full độ rộng

Sử dụng class .flex-fill để căn đều độ rộng cho các item flex.

Ví dụ:

Kết luận

OK, như vậy là xong phần Flex trong Bootstrap 4 rồi, Flex ở đây cũng dựa trên Flex trong CSS nên để hiểu hết các bạn nên xem lại phần Flex trong CSS ở series học CSS nhé.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây