Гибкая многостолбцовая разметка с колонками динамической высоты - PullRequest
Новая
       59

Гибкая многостолбцовая разметка с колонками динамической высоты

0 голосов
/ 03 февраля 2019

У меня есть 6 расширяемых блоков, которые я хочу вести следующим образом:

  1. Гибкая компоновка:
    • На мобильном устройстве находиться в одном столбце из 6 блоков
    • На планшете / маленьком ноутбуке, быть в 2 колонках по 3 коробки в каждой
    • На рабочем столе, в 3 колонках по 2 коробки в каждой
  2. Не должно быть пробелов между полями встолбец, независимо от того, развернуты ли один или несколько блоков

Желаемый (рабочий стол)

enter image description here

.container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.list {
    width: 100%;  //changed with media queries to allow multiple columns
}
<div class="container">
    <div class="list">
        <h2>Clickable Heading</h2>
        <ul class="hidden">
            <!-- List items -->
        </ul>
    </div>
        
    <!-- 5 more of DIV.list -->
    
</div>

То, что я пробовал

Достижение цели №1 легко с Flexbox, но проблема в том, чтонаправление flex - это строки, а не столбцы, поэтому при развертывании поля в строке 1 ВСЕ строки 2 перемещаются вниз, включая блоки в других столбцах.Это нарушает цель № 2.

НЕПРАВИЛЬНО

Flexible layout but wrong box flow

Достижение цели № 2 легко достигается путем изменения flex-direction до column, но тогда нет способа обернуть блоки в дополнительные столбцы, не указав фиксированную высоту для контейнера, что, очевидно, невозможно сделать, когда высота зависит от того, развернуты один или несколько блоков или нет.

Заключение отдельных блоков в DIV в контейнере и изменение этих DIV'ов с flex-wrap на column, очевидно, работает ... но только для одного макета.Мне пришлось бы переупаковывать отдельные коробки в DIV для каждого макета, что полностью сводит на нет смысл Flexbox.

Есть ли способ достичь моей цели?

...