使用 flexbox 包装所有或无答案

【问题标题】：Using flexbox to wrap all or none使用 flexbox 包装所有或无
【发布时间】：2016-02-16 21:49:38
【问题描述】：

有没有办法实现以下？

从单行上的三个项目开始，如果总宽度超过 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;
}

【问题讨论】：

这需要 JS。
...媒体查询不能用于交换 flex-direction... 不正确。 flex-direction 可以通过媒体查询轻松更改。
@Michael_B 很抱歉没有更清楚地说明该约束。我的意思是虽然这可行并且是最简单的解决方案，但我无法在当前应用程序中这样做。我会更新我的问题以更清楚地说明这一点。
也许看看content queries。
对于container queries 来说似乎是一个完美的案例，不幸的是，任何浏览器供应商都需要几年才能实现它。

标签： css html flexbox

【解决方案1】：

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

与此同时，您可以使用 polyfill：https://github.com/mlrawlings/containerqueries

【讨论】：