Question

修改与The difference between flex:1 and flex-grow:1不同。虽然答案最终是使用flex而不是flex-grow，但我的问题不是两者之间的区别，而是如何让嵌套的flex-boxes适当地包装。对于那些正在努力解决这个问题的人来说，没有办法在SO上找到答案而不知道问题是使用flex与flex-grow。如果我已经知道这个问题是flex和flex-grow之间的区别，我就不需要问这个问题了。

编辑2 如果这篇文章将被标记为重复，最好将其列为Nested column flexbox inside row flexbox with wrapping的副本，而不是flex：1和flex-grow：1之间的差异。

我有一系列div标记，定义为display:flex。它们排成一排，有3列。给出前两列的宽度，允许第三列拉伸以填充剩余的空间。该行也设置为换行，以便在较小的屏幕上，第三列将包裹在其他两列之下。

以下是一些基本的示例代码：

的style.css

.flex-row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.flex-column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border: 1px solid lightgray;
}

.box {
    display: flex;
    height: 100px;
    width: 300px;
    min-width: 200px;
    flex-shrink: 1;
    border: 1px solid green;
}

的index.html

<div class="flex-row" style="flex-wrap:wrap">
  <div class="flex-column" style="flex-grow:0">
      Column 1
  </div>

  <div class="flex-column" style="flex-grow:0;width:200px">
    Column 2
  </div>

  <div class="flex-column">
    <div class="flex-row" style="min-width:500px;flex-wrap:wrap">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
      <div class="box">Box 3</div>
      <div class="box">Box 4</div>
      <div class="box">Box 5</div>
      <div class="box">Box 6</div>
      <div class="box">Box 7</div>
    </div>
  </div>
</div>

（see my plnk here）。

最后一列包含一个带有一系列“框”的弹性行（参见示例）。

期望的效果是，当屏幕调整大小时，第三列将继续缩小到所有框都在一列中的点，并且框已缩小到它们的最小宽度。此时，屏幕宽度的任何进一步减小都会导致第三列包裹在其他两列之下，然后它会再次扩展，以包括尽可能多的盒子。

在实践中似乎发生的事情是第三列首先包装 - 然后包装它包含的内容。

这是我想看到的事情的视觉图片。

这可能与flexbox有关吗？如果是这样，我做错了什么？

Answer 1

这是你想要的。你需要改变什么：

对于flex-column，它应该是flex: 1;而不是flex-grow:1;，并为其设置min-width。通过这种方式，它可以增长和缩小。

使用flex-grow:1限制容器仅增长但不缩小，因为您在初始容器（即flex-row）中使用flex-column类，因此需要在调整视口大小时灵活使用它。 / p>

/* Styles go here */

.flex-row {
  display: flex;
  flex-direction: flex-row;
  flex-grow: 1;
}

.flex-column {
  display: flex;
  flex-direction: column;
  min-width:100px;
  flex: 1;
  border: 1px solid lightgray;
}

.box {
  display:flex;
  flex-shrink:1;
  border: 1px solid green;
  height:100px;
  width:300px;
  min-width:150px;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="flex-row" style="flex-wrap:wrap">
      <div class="flex-column" style="flex-grow:0">
          Column 1
      </div>
      
      <div class="flex-column" style="flex-grow:0;width:200px">
        Column 2
      </div>
      
      <div class="flex-column">
        <div class="flex-row" style="min-width:500px;flex-wrap:wrap">
          <div class="box">Box 1</div>
          <div class="box">Box 2</div>
          <div class="box">Box 3</div>
          <div class="box">Box 4</div>
          <div class="box">Box 5</div>
          <div class="box">Box 6</div>
          <div class="box">Box 7</div>
        </div>
      </div>
    </div>
  </body>

</html>

嵌套的flex-box包装问题

1 个答案: