В Chrome 123 вы можете использовать свойство align-content из CSS Box Alignment в макетах блоков и таблиц. Это позволит выравнивать направление блоков без необходимости создания гибкого макета или макета сетки. Однако вам может потребоваться обновить CSS, если вы использовали align-content вне этих методов макета, поскольку теперь это вступит в силу.
Поддержка браузера
- 123
- 123
- 125
- 17,4
align-content в гибких и сеточных макетах
Вероятно, вы использовали align-content для выравнивания гибких элементов или дорожек сетки. В гибком макете свойство align-content используется в гибком контейнере для выравнивания гибких элементов по поперечной оси. В следующем примере он имеет значение space-between , поэтому доступное пространство в гибком контейнере распределяется между гибкими строками.
align-content распределяет строки гибких элементов, поскольку у гибкого контейнера есть свободное пространство по поперечной оси. Центрировать элемент по вертикали
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 уже давно поддерживается в гибкой и сеточной компоновке, использование функциональных запросов с @supports всегда будет возвращать true. Это та же самая ситуация, которая произошла со свойством gap во flexbox. Рабочая группа CSS изучает решение для таких частичных реализаций .
Проверьте свои сайты на предмет неожиданного выравнивания
Свойство align-content уже много лет определяется в спецификации как средство, работающее с блочными макетами. Поскольку ни один браузер не поддерживал align-content вне этих контекстов, он ничего не делал. Однако, если вы добавили это свойство к чему-то, что не является контейнером flex или Grid, оно начнет действовать начиная с Chrome 123. Найдите в CSS использование align-content и используйте бета-версию для тестирования своих сайтов и приложений. если это может быть так для вас.