box wrapping issue

2018-06-03 23:27:19

This question already has an answer here:

The difference between flex:1 and flex-grow:1 2 answers

Nested column flexbox inside row flexbox with wrapping 2 answers

Here is what you desire. What you need to change :

For the flex-column it should be flex: 1; instead of flex-grow:1; and set a min-width to it. This way, it can grow and shrink both.

Using flex-grow:1 limits the container to only grow but not shrink and since you're using the flex-column class in the initial container ie flex-row you need it to be flexible as the viewport is resized.

/* 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/13198.html

上一篇: 如何在HTML中对齐div中心

下一篇: 包装盒问题