当网格/ Flexbox项不适合时，将流向从水平更改为垂直[重复]

Question

此问题已经在这里有了答案：

• How do I make a flexbox switch to column mode when there isn't enough room for row mode?2个答案

1. 您拥有一个网格或Flexbox，其中的项目数量固定，这是已知的，但将来可能会被程序员更改。
2. 当空间足够时，项目将完全填充水平空间。
3. 如果项目不能水平放置在一行中，那么所有项目都将垂直放置在一列中。
4. 您不知道每个项目的宽度，它可能会动态更改。
5. 我也避免使用媒体查询，因为它们是按屏幕宽度而不是容器宽度来应用的（而且未知）。>>
6. 您不应该使用JavaScript，我对纯CSS感兴趣。
7. 您可以使用Grid，Flexbox或同时使用两者。

[我已经在纯CSS中用媒体查询作为例子，以更好地演示所需的解决方案。

* {
  margin: 0;
  padding: 0;
}
html {
  padding-top: 1.5rem; /* So "Close" button don't overlap with the container. */
}
.container {
  display: grid;
  grid-auto-flow: column;
  border: 1px solid black;
}
.container > * {
  border: 1px solid red;
  width: 200px;
}
@media (max-width: 606px) {
  .container {
    grid-auto-flow: row;
  }
}
<span>Use "Full page" button and then shrink the window.</span>
<div class="container">
  <div class="item-a">itemA</div>
  <div class="item-b">itemB</div>
  <div class="item-c">itemC</div>
</div>

您有一个网格或Flexbox，其中的项目数量是已知的，但是以后可能会被程序员更改。当空间足够时，项目会完全填满水平空间。如果项目不适合...

Answer 1

不确定这是否是您想要的，但是您可以使用flex-grow ...