使用flexbox包装全部或全部

Question

有没有办法实现以下目标？

从单行上的三个项目开始，如果总宽度超过flex父级的宽度，则对齐到列方向。

针对我的特定用例的解决方案的主要限制是，尽管这可能是最简单的操作，但我无法使用媒体查询来交换弹性方向。

在这种情况下，媒体查询不是可行的解决方案，因为该组件是独立的，可以放置在各种位置，这些位置将决定容器的宽度，而与浏览器的宽度无关。如果有一种神奇的方法，媒体查询可以基于父容器而不是页面，那就太棒了，但是到目前为止，我还没有看到这样的东西。

在这个小提琴中，具有较长名称的第二个div需要包装成三行，但是我能得到的最接近的是两行。

<div class="container">
    <span class="item">Dan Martinez&nbsp;</span>
    <span class="item">@DanMartinez101&nbsp;</span>
    <span class="item">an hour ago&nbsp;</span>
</div>

<br/>

<div class="container">
    <span class="item">Someone with a really long name&nbsp;</span>
    <span class="item">@AndAReallyLongHandle&nbsp;</span>
    <span class="item">about three million years ago&nbsp;</span>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    background-color: 'red';
}

.item {
    white-space: nowrap;
    flex: 0 1 auto;
}

Answer 1

这个问题可以通过容器查询来解决。然而，没有一个浏览器供应商实现了它（据我所知，该规范尚未最终确定）。

同时你可以使用polyfill： https: //github.com/mlrawlings/containerqueries