Chromium đạt đến khoảng trống hộp linh hoạt

Thuộc tính CSS gap có trong công cụ bố cục Flexbox và nhiều cột của CSS trong Chromium.

Adam Argyle

David Grogan

Khoảng trống CSS

Từ khoá chính: gap là khoảng cách giữa các thành phần con. Bạn có thể đã nghe nói đến loại khoảng cách này được gọi là "rãnh" hoặc "lối đi". Đó chỉ là khoảng trống nơi các cạnh của hộp con chạm vào nhau.

gap là tương đối theo luồng, nghĩa là nó sẽ thay đổi linh động 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ị 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ề các vấn đề liên quan đến khoảng cách cho thành phần và tác giả CSS. Ít mã hơn để mở rộng quy mô hơn nữa.

Khoảng trống minh hoạ khả năng hỗ trợ bản địa hoá, vì khoảng trống này xử lý các thay đổi về hướng và chế độ viết: Codepen | Tweet

Khả năng tương thích với trình duyệt

Browser Support

• 57
• 16
• 52
• 10.1

Source

Cách sử dụng

gap chấp nhận mọi độ dài hoặc tỷ lệ phần trăm CSS 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 truyền 1 độ dài, sẽ được dùng cho cả hàng và cột.

Tốc ký

.grid {
  display: grid;
  gap: 10px;
}

Đặt cả hàng và cột cùng nhau cùng một lúc

Đã mở rộng

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

Khoảng trống có thể được truyền 2 độ dài, sẽ được dùng cho hàng và cột.

Tốc ký

.grid {
  display: grid;
  gap: 10px 5%;
}

Đặt cả hàng và cột riêng biệt cùng một lúc

Đã mở rộng

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Hộp linh hoạt gap

Trước khi gap xuất hiện trong Flexbox, các chiến lược liên quan đến lề âm, bộ chọn phức tạp, :last hoặc bộ chọn giả lớp loại :first hoặc các phương tiện khác để quản lý khoảng trống của một tập hợp con được bố trí và bao bọc một cách linh hoạt.

Các lần thử trước

Sau đây là các mẫu mà mọi người đã sử dụng để có khoảng cách tương tự như khoảng trống.

bộ chọn lớp giả

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

cú bị cắt thuỳ não

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

Nguồn

Tuy nhiên, những ký tự trên không hoàn toàn thay thế được gap và thường cần điều chỉnh @media hoặc :lang() để tính đến các trường hợp ngắt dòng, chế độ viết 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 tệ, nhưng chúng có thể cộng dồ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 có mục con nào chạm vào nhau.

The Antidote: gap

.layout {
  display: flex;
  gap: 10px;
}

Lưu ý: Quyền sở hữu khoảng cách sẽ chuyển từ thành phần con sang thành phần gốc

Trong 2 ví dụ đầu tiên (không có Flexbox gap), các thành phần con được nhắm đến và được chỉ định khoảng cách với các phần tử khác. Trong ví dụ về khoảng trống của thuốc giải độc, vùng chứa sẽ sở hữu khoảng trống. Mỗi thành phần con có thể tự giải phóng khỏi gánh nặng này, đồng thời tập trung quyền sở hữu khoảng cách. Đơn giản hoá tính nhất quán. Sắp xếp lại, thay đổi khung hiển thị, xoá phần tử, thêm phần 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 nội dung nghe nhìn mới, chỉ có khoảng trắng.

Bản cập nhật Công cụ cho nhà phát triển của Chromium

Những bản cập nhật này đi kèm với các thay đổi đối với Chromium DevTools. Hãy lưu ý cách ngăn Kiểu xử lý grid-gap và gap ngay bây giờ 👍

Công cụ cho nhà phát triển cho thấy cả 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, vì gap về cơ bản là một bí danh 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 lợi ích hơn là sự thuận tiện. Chúng tôi mở khoá các bố cục nội tại mạnh mẽ, có khoảng cách hoàn hảo. Trong video và đoạn mã mẫu sau đây, Lưới không thể đạt được bố cục mà Flexbox có thể. Lưới phải có số hàng và cột bằng nhau, ngay cả khi chúng được chỉ định một cách tự nhiên.

Đăng lên Twitter

Ngoài ra, hãy lưu ý khoảng cách giữa các thành phần con sẽ thay đổi như thế nào khi chúng tự động xuống dòng. Các truy vấn về nội dung nghe nhìn không thể phát hiện việc xuống dòng như vậy để điều chỉnh một cách 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 bản quốc tế hoá.

Nhiều cột gap

Ngoài việc 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á thú vị.