CSS3 19 – Flexbox trong CSS3

0
123

Xin chào các bạn, hôm nay, mình sẽ giới thiệu cho các bạn về một chủ đề rất thú vị trong CSS3, đó là Flexbox.

Nếu các bạn đã từng viết CSS để sắp xếp vị trí cho các phần tử trong trang web thì chắc hẳn bạn có thể đã gặp 1 số vấn đề rất khó giải quyết, đó là điều hết sức bình thường vì sử dụng CSS để dàn bố cục website là 1 việc không hề đơn giản chút nào. Trong rất nhiều trường hợp muốn tạo bố cục website như mong muốn, chúng ta thường sử dụng thuộc tính float và đặt position: absolute cho những thành phần con nằm trong thành phần cha có position: relative, việc này khiến chúng ta phải viết rất nhiều code CSS và kết quả thì không đoán trước được, nghĩ là 1 chuyện nhưng kết quả ra lại là chuyện khác đúng không nào.

Và thật may mắn, với Flexbox, từ nay bạn không phải làm những công việc như trên nữa. Flexbox giúp chúng ta giải quyết rất nhiều vấn đề về dàn trang trong CSS chỉ bằng 1 vài dòng code. Vậy chúng ta cùng tìm hiểu xem Flexbox là gì và nó mạnh mẽ tối ưu như thế nào nhé!

Flexbox là gì ?

Flexbox là 1 cách bố trí mới trong CSS3. Khá giống với float, Flexbox quy định vị trí của các phần tử trên cùng 1 hàng hoặc 1 cột, nhưng có những ưu điểm hơn float.

Flexbox đã được phát triển và hoàn thiện, ngày càng được nhiều trang web sử dụng, trong đó có Bootstrap 4 cũng sử dụng Flexbox như một sự lựa chọn cho hệ thống lưới Grid System.

Cách sử dụng Flexbox

Để hiển thị bố cục Flexbox, chúng ta sử dụng thuộc tính CSS là:

Flexbox trong CSS3

Thành phần có thuộc tính này gọi là flex container, trong container chứa những flex items.

Flex container có thể chỉ định những items bên trong hiển thị theo chiều dọc hoặc chiều ngang, chiều này được gọi là main axis.

Flexbox trong CSS3-01

Những flex items sẽ được đặt theo chiều của main axis. Những phần tử này có thể phóng to kích thước để lấp kín khoảng trống trong container hoặc co lại để tránh tràn ra ngoài container. Bằng cách dùng nhiều flex containers với những hướng khác nhau, bạn hoàn toàn có thể tạo ra những bố cục phức tạp tùy theo mong muốn.

Những thuộc tính của Flexbox

Flexbox có rất nhiều thuộc tính để bạn tùy biến bố cục của trang web, ở đây thì chúng ta sẽ không đi sâu vào phần này vì mình đã tìm kiếm khá nhiều bài viết giới thiệu về Flexbox và thấy phần này thường được mô tả rất chi tiết, bạn có thể xem kỹ hơn tại CSS Tricks Flexbox Guide.

Có một trang web mình thấy rất hay là http://flexboxfroggy.com/, ở đây cũng mô tả đầy đủ những thuộc tính của flexbox, ngoài ra còn có những bài tập nho nhỏ để bạn làm quen với Flexbox với giao diện trực quan cực kỳ dễ hiểu.

Những trình duyệt hỗ trợ

Flexbox được hỗ trợ đầy đủ trên những trình duyệt hiện đại nhất hiện nay, bao gồm cả những trình duyệt trên mobile, IE11 và Microsoft Edge.

Ngoài ra thì IE10 và những phiên bản cũ hơn sẽ không được hỗ trợ, điều này có lẽ là điểm yếu lớn nhất của Flexbox.

Nếu trình duyệt của bạn không hỗ trợ Flexbox, một class no-flexbox sẽ được thêm vào, được định nghĩa bằng cách sử dụng những tính năng đã được hỗ trợ, và kết quả hiển thị sẽ giống với khi sử dụng Flexbox. Và khi đó với chỉ một code, trang web của bạn sẽ hoạt động giống nhau trên mọi trình duyệt.

Ví dụ tổng quan

Căn giữa chiều dọc và chiều ngang

Sử dụng justify-content: center và align-items: center

Trên đây là ví dụ khá đơn giản sử dụng Flexbox để xây dựng bố cục, bạn có thể thấy code CSS của mình cũng không có gì nhiều, tuy nhiên nếu không sử dụng Flexbox thì có thể bạn sẽ phải code khá nhiều cùng với việc sử dụng nhiều kỹ thuật vào mới có thể xử lý được. Hãy thử sử dụng Flexbox với những thành phần phức tạp hơn xem, biết đâu bạn sẽ lại tìm ra thêm những cách thú vị để đơn giản hóa vấn đề.

Kết luận

Flexbox đưa ra cho chúng ta một công cụ cực mạnh để sắp xếp bố cục trang web, với nó chúng ta sẽ tạo ra những giao diện phức tạp với ít công sức hơn. Cám ơn các bạn đã đọc hết bài viết này!

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