Flex trong Bootstrap 4

• 13-09-2020 19:34:49
• by: baobinhnet

Khi sử dụng Bootstrap 4, chúng ta có thể sử dụng flex để dàn trang, và Bootstrap 4 cũng cung cấp cho các bạn một hệ thống thư viện để làm việc với flex. Sau đây, chúng ta hãy cùng nhau tìm hiểu về Flex trong bootstrap 4 nhé.

Sự khác biệt lớn nhất giữa Bootstrap 3 và Bootstrap 4 là Bootstrap 4 hiện sử dụng flexbox, thay vì float, để xử lý bố cục. 

Chú ý: Flexbox không hỗ trợ IE9 và các version mới hơn. Nếu bạn bắt buộc phải hỗ trợ IE9 trở xuống, hãy chuyển sang sử dụng bootstrap 3.

Tạo Flex container

Ví dụ đơn giản nhất là tạo ra một flex container với class d-flex:



Rất đơn giản đúng không bạn? Chỉ cần một class và các nội dung sẽ được tự động căn mặc định từ trái qua phải.

Tạo Flex inline container

Tiếp theo chúng ta hãy tạo một flex inline container với class d-inline-flex. Chúng ta hãy cùng xem ví dụ dưới đây nhé:



Các bạn có thể thu nhỏ tỉ lệ về 0.5x để thấy được sự khác biệt giữa flex container thông thường và flex inline container.

Dàn hàng ngang với flex

Chúng ta có thể dàn hàng ngang với d-flex flex-row:



Chúng ta có thể đảo ngược vị trí với flex-row-reverse :

Dàn hàng dọc với flex

Nếu bạn muốn dàn hàng dọc, flex của bootstrap cũng hỗ trợ. Tương tự như flex-row và flex-row-reverse

chúng ta có flex-column và flex-column-reverse

Justify content 

Khi sử dụng flex chắc chắn chúng ta không thể bỏ qua justify content. Sau đây chúng ta hãy cùng tìm hiểu nhé:
Các class để chỉnh justify content trong Bootstrap 4: 

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around

Kết luận

Vậy là chúng ta đã nghiên cứu xong flex của Bootstrap, từ giờ trở đi, các bạn hãy nhớ sử dụng class flex của bootstrap thay vì sử dụng css thuần nhé. Chúc các bạn học tập tốt để có thể làm việc tốt.

---

• Posted by baobinhnet
• 2020-09-13 16:51:27