Дата публикации:
Автор:
Heydon
Несмотря на то, что предшествовали как Grid, так и Flexbox, многоколоночная разметка представляет — по крайней мере для меня — еще более радикальный отход от того, как мы обычно думаем и о CSS-макете . Деление только одного элемента на многостолбцовое представление его содержимого кажется странным, даже еретическим.
Установка многостолбцового контекста означает запрос (поток) контента на продвижение по столбцу в горизонтальном направлении. Это вызывает одну из двух проблем, в зависимости от того, установлена ли высота элемента.
Без заданной высоты нет ограничений по высоте столбцов. Это приведет к вертикальному переполнению и необходимости прокручивать страницу вверх и вниз, чтобы прочитать каждый последующий столбец. Многие могут найти это трудным.
Однако, несмотря на растущую популярность прокручиваемых меню и других подобных шаблонов, использующих горизонтальную прокрутку, это все еще является нетрадиционной парадигмой взаимодействия - и нетрадиционные шаблоны могут быть неправильно поняты пользователями. Конечно, есть способы увеличить воспринимаемую доступность - возможно, добавив некоторый пользовательский стиль на полосу прокрутки ( Одна вещь, с которой я экспериментировал, - это применение нескольких столбцов в ответ на количество контента. Допустим, у меня есть список маркеров, и давайте предположим, что каждый пункт маркера, вероятно, будет относительно коротким; не более чем предложение. Нет смысла делить список на столбцы, когда есть только несколько точек. Но общая высота списка сокращается (и вероятность того, что читатель сможет увидеть весь список без прокрутки, увеличивается), когда длинный список делится на два. По умолчанию для Как предложила Рэйчел Эндрю, было бы полезно иметь возможность контролировать как линейное направление, так и направление переполнения блока. Поддержка переполнения блока означала бы, что мы можем взять под контроль ширину и высоту столбца . Пока выбранная высота не выше текущего окна просмотра, повторяющаяся проблема вертикальной прокрутки, описанная выше, исчезает. Стоит отметить, что «жесткое кодирование» Свойство 
.columns {
высота : [19459455] 2595
столбцы : 30ch ; ] переполнение : авто ;
} [1945901] ]
-webkit-scrollbar ) или предоставив некоторые тени, зависящие от переполнения. Но этого может быть недостаточно. Колонки, зависящие от количества
ol, ul {
столбцы : : 2 ;
Разрыв колонны : 1rem ;
]}
li {
[span] : все ;
}}
[1945] li: nth-last-child (n + 5),
li: nth-последний-child (n + 5) ~ * {
интервал столбцов : нет ;
} [1945900] column-span установлено значение all что означает, что каждый элемент списка игнорирует мандат из двух столбцов. Затем запрос количества (последний блок объявления) сбрасывает столбец-интервал в нет где присутствует 5 или более элементов списка. Несмотря на вводящее в заблуждение значение none это означает, что элементы списка будут занимать один из двух столбцов. 
Эта демонстрация становится интерактивной с JavaScript. Если вы включите JavaScript, вы сможете использовать интерактивные функции.
Переполнение направления блока
.columns {
столбцы : : : ;
}
.columns [194590023] [1945
Колонки : 30ch 25vh 3 ;
[194590215][194590]
.columns { [19459905] : 30ch 3 25vh ;
}
{
столбцы : 3 30ch 25vh ; 24] } подсчета столбцов вряд ли будет полезным в большинстве случаев, поскольку столбцы и строки теперь динамически распределяются на основе доступного пространства. Также стоит отметить, что ширина столбца задает идеальную ширину а не фиксированную, во многом как flex-based . Это устраняет наложения и пробелы. column-gap вводит пробел между столбцами. С поддержкой высоты столбца на месте, разрыв строки также должен быть поддержан. Хотя вы, вероятно, более знакомы с CSS-специфическими свойствами grid-gap grid-row-gap- и grid-column-gap Firefox уже поддерживает универсальные свойства gap row-gap и column-gap для Flexbox. Намерение состоит в том, чтобы нормализовать разрыв между модулями Grid, Flexbox и Multi-column.
Загрузка...
