Макет строки flexbox с порядком столбцов - невозможно?
У меня проблема с макетом, и я не могу придумать решение.
Это часть формы и в основном это динамический список флажков и их меток. В зависимости от ширины экрана он может быть в 1, 2 или 3 столбца.
Располагаем по столбцам, как по 3 столбцам:
1 5 9
2 6 10
3 7
4 8
Если бы они были статичными, это было бы легко сделать с помощью столбцов css ... но проблема в том, что они являются частью древовидной структуры, где каждый элемент может расширяться, чтобы показать больше элементов:
В столбцах CSS (или столбцах flexbox с заданной высотой), если вы расширяете, скажем, «2017», даты, расположенные под ним, переносятся в следующий столбец, что, как мне кажется, может сбить с толку конечного пользователя. Так что в идеале, когда 2017 расширен, он будет перемещать все, что ниже, а не в следующий столбец.
Этого можно почти достичь, используя flexbox и flex-wrap ... но единственная проблема - это порядок.
Поэтому мне в основном нужна функциональность строк flexbox с упорядочением, как столбцы. Я плохо разбираюсь в математике, поэтому мне было интересно, можно ли что-то сделать исключительно с помощью CSS ... но в остальном я также открыт для решений javascript, хотя они должны быть доступны.
А идеи? Спасибо.
Я мог бы использовать js для определения и установки высоты, но казалось, что даже при этом у меня будет проблема, когда нижние элементы будут перенесены в следующий столбец.
Что значит «единственная проблема - это заказ»? Мол, как бы гибкие элементы вышли из строя?
@dgrogan Я плохо сформулировал это, я должен был сказать, что проблема связана с flexbox, использующим flex-direction: row, поскольку при установке его в столбец по-прежнему будет проблема с содержимым, превышающим заданную высоту, помещаемую в следующий столбец, но я хотел, чтобы порядок был как в столбцах, а не слева направо.
Ответы 1
Я нашел решение, используя сетки CSS, grid-auto-flow: column; и используя Javascript для подсчета элементов, которые мне нужно разложить, и внедрения их в некоторый CSS в документ.
function injectStyles(rule) {
var reviewCount = document.querySelector("#tree-case-review-date .fancytree-container").childElementCount;
var reviewCountTwo = Math.ceil(reviewCount / 2);
var reviewCountThree = Math.ceil(reviewCount / 3);
var purCount = document.querySelector("#tree-pur .fancytree-container").childElementCount;
var purCountTwo = Math.ceil(purCount / 2);
var purCountThree = Math.ceil(purCount / 3);
var div = $("<div />", {
html: '­<style>@media only screen and (min-width:700px) { #tree-case-review-date .fancytree-container { grid-template-rows: repeat(' + reviewCountTwo + ', auto);} #tree-pur .fancytree-container { grid-template-rows: repeat(' + purCountTwo + ', auto);}}@media only screen and (min-width:1000px) { #tree-case-review-date .fancytree-container { grid-template-rows: repeat(' + reviewCountThree + ', auto);}#tree-pur .fancytree-container {grid-template-rows: repeat(' + purCountThree + ', auto);}}</style>'
}).appendTo("body");
}
window.onload = function() {
injectStyles();
};
Я думаю, что это нечестивое несоответствие jquery и нормального javascript, поэтому мне нужно узнать, как это исправить.
Не обошлось и без фиксированной высоты.