1
有没有办法实现以下目标？使用flexbox全部或全部包装
从单行上的三个项目开始，如果总宽度超过了flex父宽度，则捕捉到列方向。
对于我的特定用例，解决方案的主要限制是我无法使用媒体查询来交换柔性方向，尽管这可能是最容易做的事情。
媒体查询不是一个可行的解决方案这种情况下，因为该组件是独立的，可以放置在各种位置，这将决定容器的宽度独立于浏览器宽度。如果有媒体查询可以基于父容器而不是页面的魔术，那就太棒了，但是到目前为止我还没有看到类似的东西。
在这种fiddle较长的名字第二个div需要被包装成三行，但我可以得到最接近的是两条线。
<div class="container">
<span class="item">Dan Martinez </span>
<span class="item">@DanMartinez101 </span>
<span class="item">an hour ago </span>
</div>
<br/>
<div class="container">
<span class="item">Someone with a really long name </span>
<span class="item">@AndAReallyLongHandle </span>
<span class="item">about three million years ago </span>
</div>
.container {
display: flex;
flex-wrap: wrap;
width: 400px;
background-color: 'red';
}
.item {
white-space: nowrap;
flex: 0 1 auto;
}
这是要去要求JS。 –
* ...媒体查询不能用于交换灵活方向... *不正确。通过媒体查询可以轻松改变'flex-direction'。 –
@Michael_B对不起，没有更清楚地说明这个约束。我的意思是，虽然这将工作，并且是最简单的解决方案，但我无法在当前的应用程序中这样做。我会更新我的问题，以便更清楚。 –