Выравнивание блоков в многоколоночном макете
Спецификация выравнивания блоков описывает, как работает выравнивание в различных методах макета; на этой странице мы рассмотрим, как выравнивание блоков работает в контексте многоколоночного макета. Поскольку эта страница предназначена для описания особенностей многоколоночного макета и выравнивания блоков, её следует читать в сочетании с основной страницей выравнивания блоков, которая описывает общие особенности выравнивания блоков для различных методов макета.
В многоколоночном макете контейнер выравнивания — это область содержимого контейнера multicol. Объект выравнивания — это колонка. Свойства, применяемые к многоколоночным макетам, подробно описаны ниже.
Примечание: Многоколоночный макет предшествует спецификации выравнивания блоков. И перечисленные здесь свойства, хотя и указаны для Multicol, могут не поддерживаться браузерами.
align-content и justify-content
Свойство align-content применяется к оси блоков, а justify-content — к оси строк. Любой отступ, добавленный к колонкам из-за использования распределения пробелов, будет добавлен к зазору между колонками, тем самым увеличив зазор больше, чем это может быть указано свойством column-gap.
Использование значения justify-content отличного от normal или stretch приведет к отображению блоков колонок по column-width, указанной в контейнере multicol, а оставшееся пространство будет распределено в соответствии со значением justify-content.
column-gap
Свойство column-gap было указано в более ранних версиях спецификации многоколоночного макета и теперь унифицировано со свойствами зазоров для других методов макета в выравнивании блоков. В то время как другие методы макета обрабатывают начальное значение column-gap как 0, multicol обрабатывает его как 1em, так как, как правило, вы не хотите иметь нулевого зазора между колонками.
Ссылка
Свойства CSS
Элементы глоссария
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout
