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對不起，沒有更清楚地說明這個約束。我的意思是，雖然這將工作，並且是最簡單的解決方案，但我無法在當前的應用程序中這樣做。我會更新我的問題，以便更清楚。 –