Только что открыл flex сегодня, и я надеюсь, что он решит небольшую визуальную задачу.
У меня есть список элементов, отсортированных по алфавиту. Все они имеют одинаковую ширину, и до сих пор у меня они плавали влево. Это приводит к порядку слева направо с упаковкой, когда заканчивается горизонтальное пространство.
То, что я надеялся сделать, - это сортировать сверху вниз с максимально возможным количеством столбцов с доступной шириной. Увидев, что этот список является динамическим, высота будет переменной. И высота должна увеличиться по мере потери горизонтального пространства (изменения размера), предотвращающего как можно большее количество столбцов.
Учитывая очевидный характер того, что Flex пытается достичь, я бы подумал, что это будет поддерживаться, но пока я не могу понять это. "display: flex" и "flex-flow: wrap wrap" выглядят правильно, но для этого требуется определенная высота, которую я не могу предоставить.
Я что-то пропустил?
Изменить: Я создал JSFiddle, чтобы играть здесь: https://jsfiddle.net/7ae3xz2x/
ul {
display: flex;
flex-flow: column wrap;
height: 100px;
}
ul li {
width: 150px;
list-style-type: none;
border: 1px solid black;
text-align: center;
}
Если вы выберете высоту с ul, ничего не обернется.
Похоже, что концептуальная проблема заключается в том, что поток "столбцов" связан с высотой контейнера, а не с шириной, что я и хочу. Меня не волнует, насколько высока область. Мне нужно иметь как можно больше столбцов в доступной ширине. Возможно, это всего лишь раздражающий недостаток гибкой конвенции.
