Question

我有一个flexbox父组件，宽度约1200px，几个子项的最小宽度约400px。名义上，在屏幕宽度大于1200的情况下，考虑到边距和边框，我可以每行容纳两个子项，每个子项的宽度约为600像素。

随着屏幕宽度从大约1200px减小到大约800px，两个子项逐渐缩小到大约400px。当屏幕尺寸小于800px时，发生换行，这意味着我现在每行有一个子项。

我想要这些子项扩展回大约800像素以填充其行。我得到的是保留在约400像素宽的子项。

如果我在子项上设置“ grow：1”，则它们将从每行一个开始，每个子项使用完整的1200像素。

我希望最小宽度，弹性基础，最大宽度和增长（也许还有其他）的某种组合可以实现我想要的结果。

任何建议，我将不胜感激。

Answer 1

以下是我认为可以实现您想要的内容的摘录：

<div>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</div>
<style>
  .container {
    display: flex;
    max-width: 1200px;
    flex-wrap: wrap;
  }

  .box {
    outline: solid red 1px;
    min-width: 400px;
    flex-grow: 2;
    /* flex: 2 0 50%; */ /* If you want to ensure that you never get more than 2 items per row */
  }
</style>

总而言之，您想要的属性是flex-grow：它确保组件将填充其行上的可用空间直到指定的因子（在本例中为2，从400px宽度变为800px）

如果重要的是不要在宽屏幕上连续放置两个以上的元素，我为其中使用flex的50％的元素添加了一个替代的flex-basis属性，以使组件“更贪婪”排成一行比其他方式更容易。

如何使弹性物品收缩直到需要包装，然后再膨胀以填充新的空间？

1 个答案: