仅当没有空间容纳所有项目时，才显示(换行)所有项目(无媒体查询)

Question

实现以下功能的最简单、最通用的方法是什么(理想情况下无需精确的媒体查询(：

• 在单行上并排显示项目(当所有可用空间时(
• 当我们不能在一行中显示项目时，将它们显示在一起

示例：

更长的屏幕-所有东西都适合单行：

| AAAA BBBB CCCC | // ok - fits

更小的屏幕(没有单行显示的空间(，所以我们想显示彼此下面的所有内容：

| AAAA      | // ok - single column
| BBBB      |
| CCCC      |

(不希望的效果(使用flex-wrap:时可以看到的不希望的结果

| AAAA BBBB | // nope - wrapped partially :(
| CCCC      |
display: flex;
flex-wrap: wrap;

我们可以使用媒体查询实现类似的预期效果，但这需要知道特定的断点。所以我试图只使用flexbox、grid或类似的东西来找到解决方案，而不需要使用媒体查询。有解决方案吗？

Answer 1

如果媒体查询不是一个选项，那么唯一的其他解决方案就是使用Javascript。使用flex，基本上可以根据容器宽度在行和列之间切换。

const container = document.querySelector('.container')
// -->Change: state from row to column based on client width
if (container.clientWidth < container.scrollWidth) {
container.classList.add('flex-column');
} else {
container.classList.add('flex-row');
}

.container { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }

<div class="container">
<div>AAAAAAAAAAAAAAAAAA</div>
<div>BBBBBBBBBBBBBBBBBB </div>
<div>CCCCCCCCCCCCCCCCCC </div>
</div>