[Series Responsive Web Design] Phần 3: Flexbox CSS - Cứu tinh dàn layout, căn giữa div không còn là ác mộng!

Chào anh em! Tiếp nối series trị bệnh "vỡ giao diện", hôm nay mình sẽ mang đến cho anh em một bảo vật của CSS3 mang tên Flexbox. Tạm biệt những chuỗi ngày dùng float hay position lằng nhằng, Flexbox sẽ giúp anh em dàn trang mượt mà như người yêu cũ lật mặt.

1. Flexbox là cái chi chi?

Nói một cách sách vở thì Flexbox (Flexible Box) là một tính năng của CSS3 giúp hiển thị các phần tử linh hoạt trên nhiều kích thước màn hình. Khác với Grid Layout sinh ra để trị những bố cục website lớn (chia cột toàn trang), Flexbox là "chân ái" cho các thành phần quy mô nhỏ, các module hoặc khung bên trong trang web.

Nó được gọi là "flexible" (linh hoạt) vì nó cung cấp cách căn chỉnh, phân chia khoảng cách hiệu quả ngay cả khi bạn chưa biết trước kích thước của các phần tử.

2. Nắm trùm "Flex-container" (Phần tử cha)

Trong Flexbox có 2 trục cốt lõi mà anh em phải khắc cốt ghi tâm: Main axis (trục chính) và Cross axis (trục chéo vuông góc với trục chính).

Để kích hoạt sức mạnh, việc bắt buộc đầu tiên là phải thêm thuộc tính display: flex; cho thẻ cha (container). Sau đó, anh em có thể quẩy các chiêu thức sau:

• flex-direction: Định hướng dòng chảy của các item. Mặc định là row (trái sang phải), nhưng anh em có thể đổi thành column (trên xuống dưới) cực dễ dàng.
• flex-wrap: Mặc định các item sẽ cố sống cố chết chen chúc trên 1 dòng (nowrap). Nếu muốn chúng tự rớt xuống dòng khi hết chỗ, hãy dùng wrap
• justify-content: Dùng để căn chỉnh vị trí các item dọc theo trục Main axis. Thích căn giữa? justify-content: center;. Thích giãn đều hai bên?justify-content: space-between;.
• align-items: Anh em sinh đôi của thằng trên, nhưng dùng để căn chỉnh dọc theo trục Cross axis.

3. Điều khiển "Flex-item" (Phần tử con)

Container lo chuyện bao đồng, còn các thẻ con (item) bên trong cũng có những quyền năng riêng:

• order: Phép thuật thay đổi thứ tự hiển thị của các item mà không cần đụng vào mã HTML (mặc định là 0)
• flex-grow: Cho phép item "ăn gian" kích thước, giãn ra lấp đầy khoảng trống dư thừa của container (mặc định là 0).
• flex-shrink: Ngược lại, nếu thiếu chỗ, thuộc tính này quy định item nào phải "nhịn ăn" co lại để nhường chỗ cho anh em khác (mặc định là 1).
• flex-basis: Quy định kích thước ban đầu của item.

(Mẹo nhỏ: Anh em có thể viết gộp 3 cái trên bằng thuộc tính flex: <flex-grow> <flex-shrink> <flex-basis> cho lẹ).

4. Song kiếm hợp bích: Flexbox + Media Query

Flexbox mạnh, nhưng nếu kết hợp với Media Query (như đã học ở Phần 2) thì trang web của anh em sẽ bất tử trên mọi thiết bị.

Ví dụ, ở màn hình desktop anh em cho 3 cái div nằm ngang (flex-direction: row). Khi xuống màn hình điện thoại (<768px), chỉ cần táng thêm cái @media và đổi thành flex-direction: column hoặc cho phép flex-wrap: wrap là giao diện tự động xếp dọc ngay ngắn, không lệch 1 pixel!.

5. Túm cái váy lại (Ưu & Nhược)

Khen: Dàn trang cực kỳ linh hoạt, tự động căn chỉnh khoảng cách, thay đổi hướng hiển thị mượt mà. Chê: Vẫn có một vài trình duyệt "cổ đại" không chịu support, và nếu lạm dụng cho một project khổng lồ thì có thể làm tăng nhẹ thời gian tải trang.Nhưng chê thì chê, ở thời đại này không xài Flexbox thì phí cả thanh xuân đi code anh em ạ!