Поддержка выравнивания содержимого в макетах блоков и таблиц.

Рэйчел Эндрю

Начиная с Chrome версии 123, вы можете использовать свойство align-content из CSS-кода `Box Alignment` для блочных и табличных макетов. Это позволит выравнивать блоки по направлению без необходимости создания гибкого или сетчатого макета. Однако, если вы использовали align-content вне этих методов макетирования, вам может потребоваться обновить CSS-код, поскольку теперь он будет применяться.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 125.
  • Сафари: 17.4.

align-content в flex- и grid-макетах

Вероятно, вы использовали align-content для выравнивания элементов гибкого макета или дорожек сетки. В гибкой компоновке свойство align-content используется для контейнера гибкого макета, чтобы выровнять элементы гибкого макета по поперечной оси. В следующем примере оно имеет значение ` space-between , поэтому оно распределяет доступное пространство в контейнере гибкого макета между строками гибкого макета.

Свойство align-content обеспечивает отступы между рядами элементов flex-контейнера, поскольку в поперечном направлении контейнера остается свободное пространство.

Разместите элемент по центру по вертикали

Особенно полезен атрибут align-content для вертикального центрирования элемента внутри контейнера. Для этого используйте display: flex вместе с align-content: center . Это превратит элемент в гибкий элемент, и вступят в силу другие стандартные свойства гибких элементов. В следующем примере заголовок центрируется по вертикали с помощью align-content: center , что приводит к уменьшению размера элемента под размер содержимого, поэтому необходимо применить к элементу flex-grow: 1 .

Свойство align-content центрирует заголовок по вертикали внутри гибкого контейнера.

Благодаря наличию align-content для блочной компоновки, вы сможете добиться вертикального выравнивания без необходимости создания гибкой компоновки для работы этого свойства. Дополнительные свойства не требуются, поскольку элемент остается блочным, изменение касается только выравнивания.

Свойство align-content центрирует заголовок по вертикали внутри блочного контейнера (требуется Chrome 123 или Safari 17.4 или более поздней версии).

Проверка поддержки align-content в блочных макетах.

К сожалению, проверить поддержку свойства align-content в блочной разметке невозможно. Поскольку align-content давно поддерживается в flex- и grid-разметках, использование запросов функций с @supports всегда будет возвращать `true`. Аналогичная ситуация произошла со свойством gap в flexbox. Рабочая группа CSS изучает решение для частичных реализаций, подобных этой .

Проверьте свои сайты на наличие неожиданных несовпадений.

Свойство ` align-content уже много лет определено в спецификации как работающее с блочными макетами. Поскольку ни один браузер не поддерживал align-content вне этих контекстов, оно не оказывало никакого эффекта. Однако, если вы добавили это свойство к чему-либо, что не является контейнером `flex` или `grid`, оно начнет действовать, начиная с Chrome версии 123. Найдите в своих CSS-кодах использование align-content и используйте бета-версию для тестирования ваших сайтов и приложений, если это может быть вашей проблемой.