Flexbox с направлением: столбец но стог мульти-столбца-сторона

Текущий макет

Привет, я сделал макет с flexbox, и он был установлен flex-направление: строка; затем он организовал (1.слева) (2.справа) (3.слева) (4.right), который я установил ребенку в ширину: 50%.

Но то, что мне нужно архивировать, это больше сгибать направление: столбец, но иметь 2 столбца, которые нижняя половина элементов будет двигаться вправо.

Желаемый результат

Текущий код :

    .ds-content div{
        display: inline-flex;
        flex-wrap: wrap;
        align-items: flex-start;
     }

Изменение направления: столбец;

    .ds-content div{
         display: inline-flex;
         flex-wrap: wrap;
         align-items: flex-start;
         flex-direction: column;
         width: 100%;
         height: 150px;
     }

Проблема в том, что я не могу установить высоту исправления для этого flexbox (чтобы толкать содержимое нижней половины вправо), содержимое динамическое извлечение от администратора пользователя; динамическое с точки зрения длины контента и количества дочернего.

Заранее спасибо !

2 ответа

  1. проверить мой
    решение в Codepen

    Я держу flex-direction: rowдля того чтобы использовать align-content: stretchи иметь равную высоту в flex-деталях.
    Теперь вы просто должны играть с orderсобственностью.

  2. Думаю для этого лучше использовать колонки:

    .ds-content div {
         width: 100%;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    

    поддержка браузера может быть проблемой, хотя.