Можете ли вы сделать гибкую коробку с вложенными колонками как можно меньше, но как можно шире

Question

В приведенном ниже фрагменте кода у меня есть два контейнера flexbox: основной, обернутая строка и второй, вложенный в первый, имеющий направление столбца.

Я бы хотел, чтобы красный, зелёный и синий контейнеры отображались так:

--------------
red   | black
--------------
green | gray
--------------
blue  | 
--------------

, а не просто складывались так:

--------
red
--------
green
--------
blue
--------
black
--------
gray
--------

Этовозможное поведение?Спасибо!

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.flexbox-element {
  flex: 1 1 auto;
}

.flexbox-column {
  flex-direction: column;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.violet {
  background-color: violet;
}

.black {
  background-color: black;
}

.gray {
  background-color: gray;
}

.flexbox-element {
  width: 200px;
  min-height: 200px;
}

<div class="flexbox" style="flex: 1; width: 500px">
  <div class="flexbox flexbox-element flexbox-column" style="flex: 1 1 100%">
    <div class="flexbox-element red"></div>
    <div class="flexbox-element green"></div>
    <div class="flexbox-element blue"></div>
    <div class="flexbox-element black"></div>
    <div class="flexbox-element gray"></div>
  </div>
  <div class="flexbox-element yellow"></div>
  <div class="flexbox-element orange"></div>
  <div class="flexbox-element violet"></div>
</div>

Answer 1

1. Решение CSS3 Multicolumns
2. Решение CSS3 Grid layout

---

Из-за ограничений Flexbox, когда направление - это столбец (необходимо как-то ограничить высоту илииначе он не будет переноситься во второй столбец), это более простая задача для CSS3 Multicolumns :

.col-2 {
  columns: 2;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.flexbox-element {
  flex: 1 1 auto;
}

.col-2 {
  columns: 2;
  width: 100%;
  outline: 1px dashed blue;
}

.col-2 > * {
  width: 50%;
  min-height: 200px;
  outline: 1px dotted red;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.violet {
  background-color: violet;
}

.black {
  background-color: black;
}

.gray {
  background-color: gray;
}

.flexbox-element {
  width: 200px;
  min-height: 200px;
}

<div class="flexbox" style="flex: 1; width: 500px">
  <div class="flexbox flexbox-element col-2" style="flex: 1 1 100%">
    <div class="red">A</div>
    <div class="green">B</div>
    <div class="blue">C</div>
    <div class="black">D</div>
    <div class="gray">E</div>
  </div>
  <div class="flexbox-element yellow"></div>
  <div class="flexbox-element orange"></div>
  <div class="flexbox-element violet"></div>
</div>

---

Вы также можете использовать CSS3 макет сетки , но вам нужно будет вручную расположить каждый элемент сетки в IE10-11 иEdge 12-15 (текущий Edge 16 поддерживает ту же более новую рекомендацию, что и другие современные браузеры)

Макет сетки (Compat Edge 16+ и другие современные браузеры. IE11 требует явного позиционирования как строки, так и столбца каждый элемент сетки)

➡️ https://codepen.io/PhilippeVay/pen/GdBpJa?editors=0100

.col-2 {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns with strict equal width */
}

.col-2 > :nth-child(odd) {
  grid-column: 1; /* even items can now only occupy the 2nd column */
}

Answer 2

Если вы удалите flex-direction: column и flex: 1 из первой группы, вы получите то, что хотите.

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.flexbox-column {
  flex-direction: column;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.black {
  background-color: black;
}

.gray {
  background-color: gray;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.violet {
  background-color: violet;
}

.flexbox-element {
  width: 200px;
  min-height: 200px;
}

.flexbox-group {
  width: 400px;
  height: 600px;
  flex-direction: column;
}

<div class="flexbox" style="flex: 1; width: 500px">
  <div class="flexbox flexbox-element flexbox-group">
    <div class="flexbox-element red"></div>
    <div class="flexbox-element green"></div>
    <div class="flexbox-element blue"></div>
    <div class="flexbox-element black"></div>
    <div class="flexbox-element gray"></div>
  </div>
  <div class="flexbox-element yellow"></div>
  <div class="flexbox-element orange"></div>
  <div class="flexbox-element violet"></div>
</div>