1

什么是最简单和最通用的方法来使以下工作（理想情况下没有确切的媒体查询）：

  • 彼此相邻显示项目 = 在单行上（当所有可用空间时）
  • 当我们无法在单行中显示项目时，将它们显示在彼此下方

例子：

更长的屏幕 - 一切都适合单行：

| 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而无需使用媒体查询。有解决办法吗？

4

1 回答 1

0

如果媒体查询不是一个选项，唯一的其他解决方案是使用 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>

于 2020-09-17T19:21:41.070 回答