动态宽度flexboxes包装但保持列结构？

Question

我正在寻找具有动态宽度的卡片来填充他们的容器,但是如果卡片太小则能够包装.我做到了这一点.然而我注意到最后一张卡片填满了剩下的空间.我不希望它那样做.我希望它保持相同的列结构.这可能吗？如果有另一种方法可以让我知道,我不必使用flexboxes.

.container {
    padding: 20px;
    display : flex;
   flex-flow: row wrap;
   background:white;
}
.container > div {
    border: 1px solid black;
    background: #ececec;
    margin:5px;
    min-width:200px;
    padding: 10px;
    margin-left: 10px;
    flex: 1;
}

<div class="container">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

这是我的JSFiddle,它正在做第一张图片显示的内容(这不是我想要的).有没有办法做到这一点？

https://jsfiddle.net/foreyez/0b5dm2t2/

Answer 1

您可以使用CSS网格布局执行此操作grid-template-columns.用minmax(200px, 1fr)可以将每个列的最小宽度设置200px和最大宽度,以网格布局的一个轨道.auto-fit如果有可用空间,您还需要使用以使轨道占据全宽.

.container {
  padding: 20px;
  display: grid;
  background: white;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.container > div {
  border: 1px solid black;
  background: #ececec;
  margin: 5px;
  padding: 10px;
  margin-left: 10px;
}

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>