[ad_1]
Các công cụ bố trí CSS Flexbox và Multi-Cột của Chromium hiện hỗ trợ khoảng cách . gap-gap là tin cũ.
CSS Grid mang đến một tính năng giãn cách thú vị được gọi là Grid-gap nhanh chóng trở thành một cách phổ biến để đưa không gian vào bố cục. Thật dễ dàng để yêu bởi vì nó tự chịu trách nhiệm rất nhiều với sự thanh lịch như vậy. Bắt đầu từ Chromium 85 gap-gap giờ chỉ là gap và bạn có thể sử dụng nó với Flexbox. 💪
.layout {
[gap90] 10px ;
}
Tương thích trình duyệt #
Tại thời điểm viết gap được hỗ trợ trong máy tính để bàn Firefox 63, Firefox cho Android 63 và được lên kế hoạch cho các trình duyệt dựa trên Chromium kể từ 85. Xem Khả năng tương thích của Trình duyệt để cập nhật.
Khoảng cách CSS #
Thuật ngữ chính:
gap là khoảng cách giữa trẻ em . Bạn có thể đã nghe nói về loại khoảng cách này được gọi là "máng xối" hoặc "ngõ". Đó chỉ là không gian nơi các cạnh của hộp trẻ em chạm vào.
gap là dòng tương đối, có nghĩa là nó thay đổi linh hoạt dựa trên hướng của luồng nội dung. Ví dụ: gap sẽ tự động điều chỉnh cho các giá trị chế độ viết hoặc khác nhau mà bạn đặt cho người dùng quốc tế. Điều này làm giảm đáng kể gánh nặng của các thách thức về khoảng cách cho tác giả thành phần và CSS. Ít mã mở rộng hơn nữa.
Cách sử dụng #
gap chấp nhận bất kỳ chiều dài hoặc tỷ lệ phần trăm CSS nào dưới dạng giá trị.
.gap-example {
hiển thị : ]
gap : 10px ;
gap : ]
gap : 5% ;
gap : 1em
gap : 3vmax ;
}
Khoảng cách có thể được vượt qua 1 chiều dài, sẽ được sử dụng cho cả hàng và cột.
Tốc ký
.grid {
hiển thị : lưới
gap : 10px ;
}
Đặt cả hai hàng và cột cùng nhau cùng một lúc
Mở rộng
.grid {
lưới ;
hàng-gap : 10px ; cột-gap : 10px ;
}
Khoảng cách có thể được thông qua 2 chiều dài, sẽ được sử dụng cho hàng và cột.
Tốc ký
.grid {
hiển thị : lưới
gap : 10px 5% ;
}
Đặt riêng cả hai hàng và cột cùng một lúc
Mở rộng
.grid {
lưới ;
hàng-gap : 10px ; cột-gap : 5% ;
}
Flexbox khoảng cách #
Tất cả những khoảng trống chúng tôi vừa xem xét có sẵn với các hộp đựng Flexbox ngay bây giờ! Trước khi gap có trong Flexbox, các chiến lược liên quan đến tỷ lệ lợi nhuận âm, bộ chọn phức, : lần cuối hoặc : đầu tiên loại bộ chọn giả lớp hoặc các phương tiện khác để quản lý không gian của một bộ trẻ em được bố trí linh hoạt và bao bọc.
Những nỗ lực trước đây [
Sau đây là những mẫu mà mọi người đã sử dụng để có khoảng cách giống như khoảng cách.
bộ chọn lớp giả
.layout>: không (: con cuối cùng) {
lề dưới : 10px ;
lề phải : 10px ;
}
cú lobotomized
.layout> * + * {
lề dưới : ];
lề phải : 10px ;
}Nguồn
Mặc dù ở trên không phải là sự thay thế hoàn toàn cho khoảng cách và thường cần @media điều chỉnh truy vấn để tính toán các kịch bản, chế độ viết hoặc hướng. Thêm một hoặc hai truy vấn phương tiện có vẻ không tệ lắm, nhưng chúng có thể thêm và dẫn đến logic bố cục phức tạp.
Điều mà tác giả ở trên thực sự dự định là không có vật phẩm con nào chạm vào.
Thuốc giải độc: gap #
.layout {
hiển thị : flex
gap : 10px ;
}
Quyền sở hữu của khoảng cách chuyển từ đứa trẻ sang cha mẹ
Trong 2 ví dụ đầu tiên (không có khoảng cách Flexbox ), trẻ em được nhắm mục tiêu và chỉ định khoảng cách từ các yếu tố khác. Trong ví dụ về khoảng cách thuốc giải độc, container sở hữu khoảng cách. Mỗi đứa trẻ có thể tự giảm bớt gánh nặng, đồng thời tập trung quyền sở hữu khoảng cách. Sắp xếp lại, thay đổi chế độ xem, loại bỏ các yếu tố, nối thêm các yếu tố mới, v.v. và khoảng cách vẫn nhất quán. Không có bộ chọn mới, không có truy vấn phương tiện mới, chỉ có không gian.
Với các bản cập nhật này, các thay đổi của Chromium DevTools, hãy chú ý cách khung Kiểu xử lý khoảng cách lưới và bây giờ 👍
DevTools hỗ trợ cả gap-gap và gap điều này là do gap về cơ bản là một bí danh cho các cú pháp trước đó.
Tiềm năng bố trí mới #
Với khoảng cách flex chúng tôi mở khóa nhiều hơn sự tiện lợi, chúng tôi mở khóa bố cục nội tại mạnh mẽ, cách đều nhau, hoàn hảo. Trong video và mẫu mã sau đây, lưới không thể đạt được bố cục mà flex có thể. lưới phải có các hàng và cột bằng nhau, ngay cả khi về bản chất chúng được gán.
Ngoài ra, hãy chú ý khoảng cách giữa các trẻ em năng động như thế nào khi chúng thực sự bao bọc như thế. Truy vấn phương tiện không thể phát hiện gói như thế để điều chỉnh thông minh. Flexbox gap có thể, và sẽ, làm điều đó cho bạn trên tất cả các quốc tế hóa.
Khoảng cách nhiều cột #
Ngoài Flexbox hỗ trợ cú pháp gap bố cục nhiều cột cũng hỗ trợ cú pháp khoảng cách ngắn hơn .
bài báo {
chiều rộng cột ] 40ch ;
cột-gap : 5ch ; ] }
Khá tuyệt.
Tóm tắt #
Khoảng cách Flex cũng không phải là tất cả với Chromium 85. Ngoài ra còn có một công cụ tái cấu trúc nhiều năm của flexbox: flexNG. Tận hưởng cải tiến hiệu suất và các tính năng mới. Đó là một ngày tuyệt vời.
[ad_2]
Source link: webdesignernews