Flexbox là gì?
FlexBox là mô -đun CSS cho phép bạn tạo bố cục linh hoạt và đáp ứng cho các phần tử HTML. Với Flexbox, có thể tổ chức và căn chỉnh các yếu tố hiệu quả hơn, bất kể kích thước màn hình hoặc thiết bị được sử dụng.
Flexbox hoạt động như thế nào?
Flexbox sử dụng hệ tọa độ hai chiều, trong đó các phần tử được định vị theo các đường (trục chính) và cột (trục ngang). Có thể xác định hướng của luồng của các phần tử, thứ tự hiển thị, sự liên kết, khoảng cách giữa các phần tử và hơn thế nữa.
Thuộc tính chính của FlexBox:
- Hiển thị: Flex; : định nghĩa phần tử cha là một thùng chứa linh hoạt.
không
không
không
không
không
Ưu điểm của FlexBox:
FlexBox cung cấp một số lợi thế trong việc tạo bố cục, chẳng hạn như:
- Dễ dàng hơn để tạo bố cục đáp ứng.
- Kiểm soát lớn hơn đối với sự liên kết và khoảng cách của các yếu tố.
- Khả năng thay đổi thứ tự hiển thị các phần tử.
- Giảm nhu cầu sử dụng phao và định vị tuyệt đối.
Ví dụ về sử dụng flexbox:
Đây là một ví dụ cơ bản về cách sử dụng flexbox:
& Lt; div class = “container” & gt;
& Lt; div class = “item” & gt; mục 1 & lt;/div & gt;
& Lt; div class = “item” & gt; mục 2 & lt;/div & gt;
& Lt; div class = “item” & gt; mục 3 & lt;/div & gt;
& Lt;/div & gt;
.Thùng đựng hàng {
Hiển thị: Flex;
Justify-Content: không gian giữa;
}.mục {
Flex: 1;
Biên độ: 10px;
Đệm: 20px;
Màu nền: #f2f2f2;
}
Trong ví dụ này, chúng tôi có một thùng chứa ba mục. Container sử dụng Flexbox để phân phối các mục có cùng khoảng cách giữa chúng. Mỗi mục có lề, làm đầy và màu nền.
Với FlexBox, bạn có thể tạo bố cục phức tạp hơn và hiệu quả hơn. Nó là một công cụ mạnh mẽ cho các nhà phát triển web muốn tạo ra các thiết kế đáp ứng và linh hoạt.
Nó