Можно ли создать сетку 4x4 flexbox?

Question

Я пытаюсь создать сетку 4x4 flexbox. Каждый из четырех блоков должен иметь одинаковую высоту по вертикали, но укладывать по два на ряд слева направо. Возможно ли это?

(Измените размер вашего браузера между 960 и 640, чтобы увидеть мою попытку: http://www.joshuasortino.com/index-new или посмотрите, как бы я хотел, чтобы он работал: http://www.joshuasortino.com/index)

Редактировать: Этот эффект возможен при создании двух контейнеров (по одному для каждой строки), но я бы предпочел использовать только одну оболочку / контейнер.

Answer 1

Похоже, есть элемент, который может решить проблему.К сожалению, в настоящее время он широко не поддерживается.

-webkit-box-lines: multiple;

Предполагается, что DIV-файлы flexbox могут занимать несколько строк.

Answer 2

В ваших коробках нет ничего плохого. Вы просто сталкиваетесь с проблемами, потому что ваши изображения SVG визуализируются с большим дополнительным вертикальным пространством. Просто добавьте стили высоты / ширины, как в старой версии.

Изменить это:

<object data="public/images/charts/routine.svg" type="image/svg+xml" class="chart">

К этому:

<object data="public/images/charts/routine.svg" type="image/svg+xml" class="chart" style="width: 482px; height: 265px;">

И измените это:

<object data="public/images/charts/skills.svg" type="image/svg+xml" class="chart"> 

К этому:

<object data="public/images/charts/skills.svg" type="image/svg+xml" class="chart" style="width: 482px; height: 265px;">

В идеале вы должны использовать стили и CSS для установки этих атрибутов, я просто добавил их для демонстрационных целей