Flexbox vỡ lòng

CSS3 Flexbox ra đời đã phần nào giúp cho các lập trình viên Front end đỡ đau đầu hơn trong các trường hợp xử lý layout, trong bài này tôi không đi giải thích từng thuộc tính của Flexbox, thay vào đó tôi xin giới thiệu tổng quan về các thứ xung quanh ecosystem của Flexbox.

1. Hiểu về các thuộc tính của Flexbox

Để hiểu được cách hoạt động của các thuộc tính trong Flexbox thì bạn dành thời gian để đọc qua các trang web sau, với sự giải thích ngắn gọn và rõ ràng kèm theo ví dụ minh họa để dễ hiểu

• CSS Tricks - A Complete Guide to Flexbox
• Dive into Flexbox
• A Visual Guide to CSS3 Flexbox Properties

Nếu bạn cảm thấy chán với việc đọc tài liệu thì loạt series video hướng dẫn sau có thể khiến bạn thích thú hơn:

• What the Flexbox?
• Flexbox Fundamentals

2. Flexbox làm việc trên trình duyệt nào?

Để biết nhanh và chính xác nhất Flexbox hiện đang chạy tốt trên trình duyệt nào thì tham khảo thêm ở trang Can I Use. Flexbox hiện nay đang chạy tốt trên các trình duyệt sau:

• IE11+
• Chrome
• Firefox
• Safari 9+
• Android 4.4+

3. Xử lý prefix cho thuộc tính của Flexbox bằng cách nào?

Không chỉ những Flexbox mà với những thuộc tính khác của CSS3, để add các prefix cho trình duyệt như -webkit-, -moz-...hiện nay đã không còn là vấn đề lo ngại với sự ra đời của Autoprefixer.

4. Flexbox xử lý được những vấn đề gì của layout

Rất nhiều các tình huống layout trong 1 trang web đã được xử lý 1 cách gọn gàng chỉ 1 vài dòng code Flexbox như:

• Centering layout (canh giữa chiều ngang lẫn chiều dọc)
• Sticky Footer layout (mà không cần xác định height của footer)
• Media Object (với tùy biến vị trí ảnh ở top, middle or bottom dễ dàng)

Và mạnh mẽ nhất là áp dụng vào việc tạo Grid System với Flexbox

5. Cross Browser với Flexbox thì thế nào?

Nếu thực hiện 1 project mà không phải quan tâm về vấn đề Cross Browser thì bạn vô cùng thoải mái và không cần phải ngần ngại để sử dụng Flexbox ngay lập tức. Tuy nhiên nếu dự án bạn đang thực hiện phải đáp ứng về Cross Browser thì bạn nên tham khảo những bài viết sau để tham khảo và tìm ra cách xử lý cho dự án của bạn

• Advanced cross-browser flexbox
• Normalizing cross-browser Flexbox bugs
• Using flexbox: mixing old and new for the best browser support
• Using Modernizr with Flexbox

6. Libraries và Frameworks được tạo bởi Flexbox

• Grid based on CSS3 flexbox
• A modern CSS framework based on Flexbox

7. Tools

Những website giúp người lập trình web tương tác với GUI để tạo ra layout Flexbox được xem là bộ tools đắc lực, giúp tiết kiệm rất nhiều thời gian để dựng nên layout từ đơn giản đến phức tạp 1 cách nhanh chóng và hiệu quả

• Flexplorer
• Build with Flexbox
• Flexyboxes

8. Một số người bạn nên follow họ nếu muốn nắm bắt nhiều hơn các vấn đề về Flexbox

• Chris Coyier (tác giả của trang CSS Tricks, Codepen)
• Lea Verou (tác giả của cuốn sách CSSSecretsBook, cũng như là dev đang làm việc cho W3C)
• Necolas (Engineering Lead tại Twitter, cũng như được biết đến là tác giả của Normalize.css)
• Sara Soueidan (UX Consultant, Author, Speaker & Trainer Front End)

Vừa rồi là cái nhìn tổng quan, kèm theo những tài liệu cụ thể hướng dẫn bạn đến với Flexbox. Hi vọng bạn hiểu về Flexbox và áp dụng nó ngay vào project để thấy được sự lợi hại của nó.