弹性框 - 在空间允许的情况下，在列中排列项目，每行有多个元素

Question

我想在列中排列一些可变宽度的项目，其中列具有固定宽度。但是我希望如果一组元素的总宽度不超过列宽，元素彼此相邻堆叠。在代码段中，我想将 CSS 添加到第一个容器中，以便第二个和第三个div 彼此相邻，就像它们在第二个容器中一样。我事先不知道元素宽度，所以我不能通过在应该相邻的元素周围放置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>