[CSS Fix] Когда justify-content: space-evenly переполняется, расцентрируйте содержимое
Bramus показал нам умный Space Toggle на основе анимации прокрутки, который позволяет нашим стилям реагировать в зависимости от того, может ли элемент прокручиваться или нет.
Зайдите туда, чтобы увидеть, как это работает, продолжайте здесь, чтобы узнать, как я это использовал.
Когда мы используем пространство равномерно
Когда контент занимает всю ширину вашей страницы в столбцах, например маршруты, баннеры домов и т. д., justify-content: space-evenly; субъективно это лучший макет для него (это .jutify-evenly, если у вас tailwind)
https://codepen.io/propjockey/pen/jOXxOro/2efa1cfd97260f464e111f1104ee239d
Какое пространство- равномерно разбивается
Если для раздела столбцов установлено равномерное пространство, но код позволяет добавлять больше столбцов и прокручивать их по горизонтали, вы, вероятно, ожидаете, что overflow-x: auto; сделать это хорошо.
Вот 7 столбцов с overflow-x: auto; и тот же код, что был показан ранее:
https://codepen.io/propjockey/pen/ExGLxXN/2a57fee9c51d8d2a1711b0a6dadeb1ac
По крайней мере 1,7 столбца полностью недоступны, прокручены влево в недоступных отрицательных позициях прокрутки.
Почему пространство равномерно разрывается при переполнении
Этот ответ на stackoverflow отлично объясняет «почему»:
Я обнаружил, что спецификации CSS описывают «резервное выравнивание» на случай, если применить интервал невозможно. Для пространства-между это начало, тогда как для пространства-равномерного, к сожалению, это центр. Это объясняет наблюдаемую разницу в перекрытии. Тем не менее, в спецификации также упоминается
Будущий уровень этого модуля может позволить явно указать резервное выравнивание.
Tак что, возможно, со временем мы сможем запустить резервный вариант.
До этого времени я нашел обходной путь: установить минимальную ширину контейнера. Чтобы избежать чрезмерной ширины, оберните контейнер прокручиваемым родительским элементом. Демо здесь.
Где исправление CSS-Only для равномерного переполнения?!
Все начинается в этой статье от Брамуса, затем, адаптируя его Space Toggle к нашему решению, мы создаем здесь класс для замены .justify-evenly:
@keyframes detect-scroll {
from, to { --can-scroll: ; }
}
.justify-evenly-until-scroll {
--start-if-can-scroll: var(--can-scroll) start;
justify-content: var(
--start-if-can-scroll, space-evenly
);
animation: detect-scroll linear;
animation-timeline: scroll(self inline);
}Делаю заметку: огромный успех — и мы добавили inline в animation-timeline: scroll(self inline), чтобы вместо этого она реагировала на горизонтальную прокрутку.
Замените .justify-evenly в html на наш новый .justify-evenly-until-scroll, и вы получите:
Учтите
Bramus (и кто-то в частном порядке) сообщил мне о новой функции с небольшим расширением поддержки браузера по сравнению с анимацией scroll(): Безопасное ключевое слово justify-content
https://drafts.csswg.org/css-align-3/#overflow-values
В настоящее время он работает с justify-content: centersafe; но если вам конкретно нужно space-evenly (я хочу!), этот хак на данный момент является единственным работающим решением.
Во всех предыдущих демо-версиях использовалась сетка, здесь она с flex, сначала с использованием space-evenly safe, которая пока ничего не делает. Далее, тот же хак, который использовался в приведенных выше демонстрациях сетки, также работает и на flex.
