Thuộc tính gap của CSS có sẵn cho các công cụ bố cục CSS Flexbox và nhiều cột của Chromium.
Khoảng cách CSS
gap là flow tương đối, nghĩa là nó thay đổi động dựa trên hướng của luồng nội dung. Ví dụ: gap sẽ tự động điều chỉnh theo các giá trị writing-mode hoặc direction khác nhau mà bạn đặt cho người dùng quốc tế. Điều này giúp giảm đáng kể gánh nặng về vấn đề giãn cách cho
thành phần và tác giả CSS. Ít mã hơn, mở rộng hơn nữa.
Khả năng tương thích với trình duyệt
Cách sử dụng
gap chấp nhận mọi độ dài CSS hoặc phần trăm làm giá trị.
.gap-example {
display: grid;
gap: 10px;
gap: 2ch;
gap: 5%;
gap: 1em;
gap: 3vmax;
}
Khoảng trống có thể được chuyển 1 chiều, sẽ được sử dụng cho cả hàng và cột.
.grid {
display: grid;
gap: 10px;
}
Đặt cả hàng và cột cùng nhau cùng một lúc
.grid {
display: grid;
row-gap: 10px;
column-gap: 10px;
}
Khoảng trống có thể được chuyển 2 độ dài, sẽ được sử dụng cho hàng và cột.
.grid {
display: grid;
gap: 10px 5%;
}
Đặt cả hàng và cột riêng biệt cùng một lúc
.grid {
display: grid;
row-gap: 10px;
column-gap: 5%;
}
Hộp linh hoạt gap
Trước khi gap có trong Flexbox, các chiến lược liên quan đến lề âm, bộ chọn phức tạp, bộ chọn lớp giả kiểu :last hoặc :first hoặc các phương pháp khác để quản lý không gian của một tập hợp con được bố trí linh động.
Số lần thử trước đó
Sau đây là các mẫu mà mọi người đã sử dụng để có được khoảng cách giống như khoảng cách.
.layout > :not(:last-child) {
margin-bottom: 10px;
margin-right: 10px;
}
Tuy nhiên, ở trên không phải là lựa chọn thay thế đầy đủ cho gap và thường cần các điều chỉnh @media hoặc :lang() để tính đến các tình huống gói, chế độ ghi hoặc hướng.
Việc thêm một hoặc hai truy vấn nội dung nghe nhìn có vẻ không quá tệ nhưng chúng có thể tăng lên và dẫn đến logic bố cục phức tạp.
Điều mà tác giả ở trên thực sự muốn là không chạm vào các mục con nào.
Thuốc giải độc: khoảng cách
.layout {
display: flex;
gap: 10px;
}
Trong 2 ví dụ đầu tiên (không có Flexbox gap), các phần tử con được nhắm mục tiêu và chỉ định khoảng cách từ các phần tử khác. Trong ví dụ về khoảng cách đối tượng, vùng chứa sở hữu khoảng cách. Mỗi thành phần con có thể tự giảm bớt gánh nặng đó, đồng thời tập trung vào quyền sở hữu không gian. Đơn giản hoá tính nhất quán. Sắp xếp lại, thay đổi khung nhìn, xoá phần tử, nối phần tử mới, v.v. và giãn cách vẫn nhất quán. Không có bộ chọn mới, không có truy vấn nội dung nghe nhìn mới, chỉ có dấu cách.
Bản cập nhật Công cụ của Chromium cho nhà phát triển
Với những bản cập nhật này, các thay đổi đối với Công cụ của Chromium cho nhà phát triển, hãy lưu ý cách ngăn Kiểu xử lý grid-gap và gap ngay bây giờ 👍
grid-gap và gap, trong đó gap được dùng bên dưới grid-gap để cho phép tầng sử dụng cú pháp mới nhất.Công cụ cho nhà phát triển hỗ trợ cả grid-gap và gap, điều này là do gap về cơ bản là đại diện cho các cú pháp trước đó.
Tiềm năng của bố cục mới
Với Flexbox gap, chúng tôi mang đến nhiều điều tiện lợi hơn cả. Chúng tôi cung cấp các bố cục nội tại mạnh mẽ,
có khoảng cách hoàn hảo và nội tại. Trong video và mã mẫu sau đây ở bên dưới, Lưới không thể đạt được bố cục như Flexbox. Lưới phải có các hàng và cột bằng nhau, ngay cả khi chúng được chỉ định nội tại.
Ngoài ra, hãy lưu ý đến mức độ linh động của khoảng cách giữa các phần tử con khi chúng thực chất gói như vậy. Truy vấn nội dung đa phương tiện không phát hiện được việc gói như vậy để thực hiện điều chỉnh thông minh.
Flexbox gap có thể và sẽ thực hiện việc này cho bạn trên tất cả các hoạt động quốc tế hoá.
Nhiều cột gap
Ngoài Flexbox hỗ trợ cú pháp gap, bố cục nhiều cột cũng hỗ trợ cú pháp gap ngắn hơn.
article {
column-width: 40ch;
column-gap: 5ch;
gap: 5ch;
}
Khá Rad.