Chromium создает пробел во Flexbox

Свойство CSS gap используется в механизмах компоновки Chromium, таких как CSS Flexbox и Multi-Column.

Adam Argyle

David Grogan

CSS-зазор

Ключевой термин: gap — это расстояние между детскими ячейками . Возможно, вы слышали, что такое расстояние называют «бороздами» или «проходами». Это пространство только там, где соприкасаются края детских ячеек.

gap является относительным к потоку , то есть он динамически изменяется в зависимости от направления потока контента. Например, gap автоматически подстраивается под различные значения writing-mode или direction , которые вы задаете для пользователей из разных стран. Это значительно облегчает решение проблем с отступами для разработчика компонента и автора CSS. Кроме того, уменьшается необходимость масштабирования кода.

Gap демонстрирует поддержку локализации, обрабатывая изменения направления и режима написания: Codepen | Tweet

Совместимость с браузерами

Browser Support

• 57
• 16
• 52
• 10.1

Source

Использование

gap принимает в качестве значения любую длину CSS-стилей или процентное значение.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}

В поле "Промежуток" можно указать длину 1, которая будет использоваться как для строки, так и для столбца.

Стенография

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

Объедините строки и столбцы одновременно .

Расширенный

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

В поле "Промежуток" можно указать две длины, которые будут использоваться для строки и столбца.

Стенография

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

Настройте строки и столбцы одновременно по отдельности .

Расширенный

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

gap Flexbox

До появления gap в Flexbox использовались стратегии, включающие отрицательные поля, сложные селекторы, псевдоклассовые селекторы типа :last или :first или другие средства управления пространством динамически размещаемого и охватывающего набор дочерних элементов.

Предыдущие попытки

Ниже представлены схемы, которые люди использовали для создания зазоров.

селекторы псевдоклассов

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

лоботомизированная сова

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

Источник

Однако, приведенные выше методы не являются полной заменой gap и часто требуют корректировки с @media или :lang() для учета сценариев переноса текста, режимов записи или направления. Добавление одного-двух медиа-запросов может показаться не таким уж плохим решением, но в совокупности они могут привести к сложной логике компоновки.

На самом деле автор хотел, чтобы ни один из дочерних элементов не соприкасался с другим.

Противоядие: пробел

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

Примечание: Право собственности на интервал между детьми переходит от ребенка к родителю.

В первых двух примерах (без Flexbox gap ) отступы назначаются дочерним элементам от других элементов. В примере с антидотом gap контейнер владеет отступами. Каждый дочерний элемент может снять с себя эту нагрузку, одновременно централизуя управление отступами. Это упрощает обеспечение согласованности. Изменение порядка, изменение области просмотра, удаление элементов, добавление новых элементов и т. д. — отступы остаются согласованными. Никаких новых селекторов, никаких новых медиа-запросов, только отступы.

Обновления Chromium DevTools

В связи с этими обновлениями внесены изменения в Chromium DevTools. Обратите внимание, как теперь панель «Стили» обрабатывает grid-gap и gap 👍

В инструментах разработчика отображаются как grid-gap , так и gap , при этом gap используется ниже grid-gap , чтобы каскад мог использовать новейший синтаксис.

DevTools поддерживает как grid-gap , так и gap , поскольку gap по сути является псевдонимом для предыдущих синтаксисов.

Возможность новой планировки

С помощью Flexbox gap мы открываем не только удобство, но и мощные, идеально сбалансированные, внутренне заданные макеты. В видео и приведенном ниже примере кода Grid не может обеспечить макет, который может Flexbox. Grid должен иметь равные строки и столбцы, даже если они заданы внутренне.

Твит

Также обратите внимание, насколько динамично изменяется расстояние между дочерними элементами, когда они переносятся таким образом. Медиа-запросы не могут обнаружить подобный перенос и внести необходимые корректировки. Flexbox gap может и будет делать это за вас во всех интернационализациях.

Многоколоночный gap

Помимо поддержки синтаксиса gap в Flexbox, многоколоночные макеты также поддерживают более короткий синтаксис gap .

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

Довольно круто.