时间戳

首页 > 解决方案 > CSS Flexbox：重排后使用可用空间

html - CSS Flexbox：重排后使用可用空间

问题描述

我遇到了以下情况：我的页面包含一个正常情况下的面板。

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属性，并且在正常分辨率下完全弄乱了我的页面布局。此外，它无论如何也没有达到预期的效果。

非常感谢任何提示！

标签： htmlcssweb

解决方案

使用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>

推荐阅读