使用 flexbox 包裹所有或 none

Question

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

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

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

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

在这个 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解决。但是 none 的浏览器供应商实现了它（规范尚未最终确定，AFAIK）。

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

使用 flexbox 包裹所有或 none

Using flexbox to wrap all or none

html

css

flexbox