我遇到了以下情況：我的頁面包含一個面板，在正常情況下看起來像這樣。
Text 1 Text text lorem ipsum lorem ipsum lorem ipsum
這是 HTML：
<div class="ui-g">
<div class="ui-g-6">
Text 1
</div>
<div class="ui-g-6">
Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
現在，在低解析度下，我希望列重排為我使用 flexbox 完成的單個列：
.ui-g {
display: flex;
flex-wrap: wrap;
}
.ui-g > div {
min-width: 180px;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
}
這意味著：通常，兩列的寬度均為 50%（因為ui-g-6），最小寬度為 180px -> 如果面板的解析度低于 ~360px，則會發生回流。
我的問題如下：
降低解析度時，頁面從
Text 1 Text text lorem ipsum lorem ipsum lorem ipsum
到
Text 1 Text text lorem ipsum lorem ipsum
lorem ipsum
回流后：
Text 1
Text text lorem ipsum lorem ipsum
lorem ipsum
如您所見，內容現在不必要地狹窄，我希望它看起來像這樣：
Text 1
Text text lorem ipsum lorem ipsum lorem ipsum
我知道 flex-grow，但這會覆寫任何width屬性，并在正常解析度下完全弄亂我的頁面布局。此外，它無論如何都沒有達到預期的效果。
任何提示非常感謝！
uj5u.com熱心網友回復：
使用flex-basis而不是min-width和添加flex-grow應該會讓你到達那里：
.ui-g {
display: flex;
flex-wrap: wrap;
outline: #0FF6 solid;
outline-offset: 3px;
margin: 1em;
}
.ui-g>div {
flex-basis: 180px;
flex-grow: 1;
box-sizing: border-box;
margin: 0 auto;
outline: #F0F6 solid;
outline-offset: 0px;
}<div class="ui-g">
<div class="ui-g-6">
Text 1
</div>
<div class="ui-g-6">
Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
<div class="ui-g" style="width: 300px">
<div class="ui-g-6">
Text 1
</div>
<div class="ui-g-6">
Text text lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>uj5u.com熱心網友回復：
我可能誤解了你的問題，但是：
.ui-g {
display: flex;
flex-wrap: wrap;
}
.ui-g > div {
min-width: 180px;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
}
@media only screen and (max-width: 360px) {
.ui-g {
white-space: nowrap; /* text wont go to next line if it refactors */
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/356288.html
上一篇：Bootstrap回應式列