css - 使用 flexbox 包装所有或不包装

Question

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

从一行中的三个元素开始，如果总宽度超过 flex 父级的宽度，则对齐列方向。

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

在这种情况下，媒体查询不是可行的解决方案，因为该组件是独立的，可以放置在各种位置，这些位置将独立于浏览器宽度指定容器宽度。如果媒体查询可以基于父容器而不是页面存在某种魔力，那就太棒了，但到目前为止我还没有看到任何类似的东西。

在此 fiddle名称较长的第二个 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

问题可以通过 container queries 解决.然而，没有一个浏览器供应商实现它(规范尚未最终确定，AFAIK)。

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