Flexbox - Tổng quan

Cleo lên Style Sheets (CSS) là một ngôn ngữ thiết kế đơn giản nhằm mục đích đơn giản hóa quá trình làm cho các trang web trở nên hiển thị. CSS xử lý một phần giao diện của trang web.

Sử dụng CSS, bạn có thể kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, cách các cột được đặt kích thước và bố cục, hình ảnh hoặc màu nền nào được sử dụng, thiết kế bố cục, các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau cũng như hàng loạt các hiệu ứng khác.

Để xác định vị trí và kích thước của các hộp, trong CSS, bạn có thể sử dụng một trong các chế độ bố cục có sẵn -

• The block layout - Chế độ này được sử dụng trong việc sắp xếp tài liệu.

• The inline layout - Chế độ này được sử dụng để bố trí văn bản.

• The table layout - Chế độ này được sử dụng trong việc sắp xếp các bảng.

• The table layout - Chế độ này được sử dụng để định vị các phần tử.

Tất cả các chế độ này được sử dụng để căn chỉnh các phần tử cụ thể như tài liệu, văn bản, bảng, v.v., tuy nhiên, không có chế độ nào trong số này cung cấp giải pháp hoàn chỉnh để bố trí các trang web phức tạp. Ban đầu điều này được sử dụng để được thực hiện bằng cách sử dụng kết hợp các phần tử nổi, phần tử được định vị và bố cục bảng (thường). Nhưng phao chỉ cho phép đặt các hộp theo chiều ngang.

Flexbox là gì?

Ngoài các chế độ nêu trên, CSS3 cung cấp một chế độ bố trí khác Hộp linh hoạt, thường được gọi là Flexbox.

Sử dụng chế độ này, bạn có thể dễ dàng tạo bố cục cho các ứng dụng và trang web phức tạp. Không giống như float, bố cục Flexbox cho phép kiểm soát hoàn toàn hướng, căn chỉnh, thứ tự, kích thước của các hộp.

Các tính năng của Flexbox

Sau đây là các tính năng đáng chú ý của bố cục Flexbox:

• Direction - Bạn có thể sắp xếp các mục trên trang web theo bất kỳ hướng nào như trái sang phải, phải sang trái, trên xuống dưới và từ dưới lên trên.

• Order - Sử dụng Flexbox, bạn có thể sắp xếp lại thứ tự nội dung của trang web.

• Wrap - Trong trường hợp không nhất quán cho nội dung của trang web (trong một dòng), bạn có thể gói chúng thành nhiều dòng (theo cả chiều ngang) và chiều dọc.

• Alignment - Sử dụng Flexbox, bạn có thể căn chỉnh nội dung của trang web phù hợp với vùng chứa của chúng.

• Resize - Sử dụng Flexbox, bạn có thể tăng hoặc giảm kích thước của các mục trong trang để phù hợp với không gian có sẵn.

Hỗ trợ các trình duyệt

Sau đây là các trình duyệt hỗ trợ Flexbox.

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+
• Android 4.4+
• iOS 7.1+