Flex box - упорядочить элементы в столбце с несколькими элементами в каждой строке, если позволяет пространство

Question

Я хочу расположить некоторые элементы переменной ширины в столбце, где столбец имеет фиксированную ширину.Но я хочу, чтобы элементы располагались рядом друг с другом, если общая ширина группы элементов не превышает ширину столбца.Во фрагменте я хочу добавить CSS в первый контейнер, чтобы 2-й и 3-й делители были рядом друг с другом, как и во втором контейнере.Я не знаю ширину элементов заранее, поэтому я не могу просто сделать это вручную, поместив div вокруг элементов, которые должны быть смежными.Я также хочу сделать это с помощью flexbox, а не CSS-сеток, если это тоже решение.

.container {
  width: 500px;
  border: 1px solid red;
}

.flexcol {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inlineblock > div {
  display: inline-block;
}

.item {
  border: 1px solid black;
  font-size: 24pt;
  text-align: center;
}

.item1, .item4 {
  width: 400px;
}

.item2, .item3 {
  width: 200px;
}

<div class="container flexcol">
  <div class="item item1">
    Item 1
  </div>
  <div class="item item2">
    Item 2
  </div>
  <div class="item item3">
    Item 3
  </div>
  <div class="item item4">
    Item 4
  </div>
</div>
<div class="container flexcol">
  <div class="item item1">
    Item 1
  </div>
  <div class="inlineblock">
    <div class="item item2">
      Item 2
    </div>
    <div class="item item3">
      Item 3
    </div>
  </div>
  <div class="item item4">
    Item 4
  </div>
</div>

Скрипка здесь того же кода: https://jsfiddle.net/6ycer7b0/1/

Answer 1

Вы можете сделать это с направлением строки и включить перенос, чтобы имитировать поведение столбца, так как элементы будут складываться друг над другом:

.container {
  width: 500px;
  border: 1px solid red;
}

.flexcol {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
}

.item {
  border: 1px solid black;
  font-size: 24pt;
  text-align: center;
}

.item1, .item4 {
  width: 400px;
}

.item2, .item3 {
  width: 200px;
}

<div class="container flexcol">
  <div class="item item1">
    Item 1
  </div>
  <div class="item item2">
    Item 2
  </div>
  <div class="item item3">
    Item 3
  </div>
  <div class="item item4">
    Item 4
  </div>
</div>