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

使用flexbox包装all或none

1 个答案: