包装盒问题

2018-06-03 23:27:18

这个问题在这里已经有了答案：

flex：1和flex-grow之间的区别：1 2个答案

排行flexbox中的嵌套列flexbox，包装2个答案

这是你的愿望。你需要改变的是：

对于flex-column它应该是flex: 1; 而不是flex-grow:1; 并为其设置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;
}

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

链接地址: http://www.djcxy.com/p/13197.html

上一篇: box wrapping issue

下一篇: block elements inside flex box?