嵌套的flex-box包装问题

Question

嵌套的flex-box包装问题

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

编辑2 如果这篇文章将被标记为重复,最好将其列为行flexbox内的嵌套列flexbox的副本,而不是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;
}

Run Code Online (Sandbox Code Playgroud)

的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>

Run Code Online (Sandbox Code Playgroud)

(见我的plnk).

最后一列包含一个带有一系列"框"的弹性行(参见示例).

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

在实践中似乎发生的是第三列首先包装 - 在包装它包含的内容之前.

这是我想看到的视觉图片.

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

Answer 1

小智 5

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

对于 theflex-column它应该flex: 1;代替并为其flex-grow:1;设置 a 。min-width这样，它既可以增长也可以收缩。

使用flex-grow:1限制容器只能增长而不缩小，并且由于您在初始容器（即 flex-row）中使用了 flex-column 类，因此您需要它在调整视口大小时保持灵活。

/* 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;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，11 月前
查看次数：	1455 次
最近记录：	7 年，11 月前