Hướng dẫn sử dụng Flexbox căn bản cho người mới bắt đầu
Flexbox là một kiểu dàn trang mà CSS tạo ra để các phần tử sẽ tự cân đối kích thước để hiển thị trên mọi thiết bị. Bài viết này Bizfly Cloud sẽ mang đến cho bạn cái nhìn toàn cảnh về Flexbox.
Giới thiệu chung về Flexbox
Flexbox hay còn gọi đầy đủ là CSS Flexible Box Layout Module, kỹ thuật dàn trang mới được tạo ra trong CSS3 để cải thiện khả năng căn chỉnh các item, hướng và thứ tự của chúng kể cả khi kích thước không cố định. Flexbox bao gồm flex-container (phần tử cha) và flex-item (phần tử con).
Qua hình minh họa, bạn có thể hình dung và biết được các thuật ngữ và thuộc tính của khung linh hoạt (containter) và các các mục nhỏ linh hoạt (item). Thuật toán dàn trang của Flexbox không dựa vào khối hoặc bố trí nội tuyến mà dựa trên chiều ngang và dọc để cân đối với các kích thước màn hình khác nhau.
Bạn có thể tham khảo thêm W3C để hiểu thêm rằng việc bố trí Flexbox đã trải qua nhiều lần thử nghiệm lặp đi lặp lại và đã có những thay đổi so với dự thảo ban đầu của Flexbox năm 2009, do đó hạn chế việc nhầm lẫn không đáng có. Phần tiếp theo của bài viết này sẽ mang đến cho bạn thêm thông tin và cách sử dụng để Flexbox phát huy tác dụng trong công việc của bạn nhé.
Những trình duyệt hỗ trợ Flexbox phiên bản cuối cùng
Dưới đây là danh sách các trình duyệt hiện đang hỗ trợ Flexbox bản cuối:
Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1+ (dùng tiến tố -webkit-)
Android 4.4+
iOS 7.1+ (dùng tiền tố -webkit-)
Cách sử dụng Flexbox
Để sử dụng dàn trang Flexbox, bạn cần đặt display: flex lên phần tử html muốn áp dụng flexbox
.flex-container {
display: -webkit-flex; /_ Safari _/
display: flex;
}
Hoặc nếu bạn muốn hiển thị như sử dụng một phần tử nội tuyến thì bạn thực hiện thao tác:
.flex-container {
display: -webkit-inline-flex; /_ Safari _/
display: inline-flex;
}
Lưu ý: Đây là giá trị duy nhất bạn có thể đặt trên phần tử cha và các phần tử con sẽ lập tức trở thành flex-item.
Có nhiều cách để kết hợp các giá trị Flexbox và cách đơn giản nhất để hiểu các tùy chọn của Flexbox và cách dùng của chúng đó là chia chúng thành hai nhóm bao gồm flex-container và flex-item.
Các mục dưới đây là giải thích và tác động của các thuộc tính Flexbox.
Các thuộc tính của Flexbox
Thuộc tính của Flex-container
1. Flex-direction
Thuộc tính này thể hiện cách flex-item được bố trí trong flex-container bằng cách đặt hướng trục chính của flex-container. Trục chính có thể theo hai hướng chính: hàng ngang hoặc cột dọc.
Bao gồm:
Row:
Theo giá trị row, các flex-item được trình bày theo hàng ngang từ trái sang phải
.flex-container {
-webkit-flex-direction: row; /_ Safari _/
flex-direction: row;
}
Row-reverse:
Với giá trị row-reverse, các flex-item được trình bày theo hàng ngang đảo ngược so với row: từ phải sang trái.
.flex-container {
-webkit-flex-direction: column; /_ Safari _/
flex-direction: column;
}
Giá trị mặc định: Row
Lưu ý: Row và Row-reverse phụ thuộc vào chế độ viết vì vậy nếu viết từ phải sang trái thì chúng sẽ tự động đảo ngược.
Flex-wrap
Ý tưởng ban đầu của Flexbox là để flex-container phân bổ các flex-item trên 1 dòng. Thuộc tính flex-wrap cho phép flex-container dàn các item trên một hoặc nhiều dòng, và hướng của dòng mới tương tự.
Với đoạn code dưới đây thì các flex-item được hiển thị trên một dòng, sao cho vừa với chiều ngang của flex-container.
.flex-container {
-webkit-flex-wrap: nowrap; /_ Safari _/
flex-wrap: nowrap;
}
Ngoài ra, khi thay nowrap bằng wrap thì các flex items được hiển thị trên nhiều hàng nếu cần và theo chiều từ trái sang phải, từ trên xuống dưới.
.flex-container {
-webkit-flex-wrap: wrap; /_ Safari _/
flex-wrap: wrap;
}
Ngược lại, wrap-reverse thì sắp xếp các flex-item trên nhiều hàng và theo chiều đảo ngược từ phải sang trái, từ dưới lên trên.
.flex-container {
-webkit-flex-wrap: wrap-reverse; /_ Safari _/
flex-wrap: wrap-reverse;
}
Giá trị mặc định: nowrap
Lưu ý: Wrap và wrap-reverse phụ thuộc vào chế độ viết vì vậy nếu viết từ phải sang trái thì chúng sẽ tự động đảo ngược
Flex-flow
Thuộc tính này là kết hợp của flex-direction và flex-wrap
.flex-container {
-webkit-flex-flow: || ; /_ Safari _/
flex-flow: || ;
}
Giá trị mặc định: row nowrap
Justify-content
Thuộc tính Justify-content dùng để căn chính các flex-item theo trục chính của dòng trong flex-container. Thuộc tính này rất hữu ích trong việc thêm khoảng trắng còn thừa ngay cả khi tất cả các flex-item trên một dòng không thể giãn thêm hoặc đã đạt đến kích thước tối đa.
Flex-start để các flex-item được sắp xếp từ cạnh trái của flex-container trong trường hợp ngôn ngữ viết từ trái sang phải.
.flex-container {
-webkit-justify-content: flex-start; /* Safari */
justify-content: flex-start;
}
Flex-end dùng khi bạn muốn sắp xếp các flex-item từ cạnh phải của flex-container
.flex-container {
-webkit-justify-content: flex-end; /_ Safari _/
justify-content: flex-end;
}
Tương tự flex-center dùng để sắp xếp flex-item ở giữa flex-container
.flex-container {
-webkit-justify-content: space-around; /_ Safari _/
justify-content: space-around;
}
Ngoài ra, để hiển thị các flex-item với các khoảng cách bằng nhau, flex-item đầu và cuối được căn ra cạnh của flex-container thì bạn thực hiện space-between với đoạn code sau:
.flex-container {
-webkit-justify-content: space-between; /_ Safari _/
justify-content: space-between;
}
Hơn thế nữa, với Flexbox bạn còn có thể sắp xếp các flex-item đều có khoảng trắng đều nhau kể cả đối với flex-item đầu và cuối.
Qua bài viết này, chắc rằng bạn sẽ dễ dàng làm quen và sử dụng thành thạo Flexbox. Cùng đón đọc những bài viết hấp dẫn khác từ BizFly Cloud nhé.
Nguồn: Bizfly Cloud chia sẻ
>> Có thể bạn quan tâm: Học cách dàn trang với Flexbox trong CSS
BizFly Cloud là nhà cung cấp đa dịch vụ điện toán đám mây được vận hành bởi VCCorp.
BizFly Cloud là một trong bốn doanh nghiệp đáp ứng đầy đủ toàn bộ tiêu chí, chỉ tiêu kỹ thuật, an toàn thông tin của nền tảng điện toán đám mây phục vụ Chính phủ điện tử/chính quyền điện tử do Bộ TT&TT chứng nhận.
Độc giả quan tâm đến các giải pháp của BizFly Cloud có thể truy cập tại đây.
