Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

这是我的JSFiddle，目前正在进行第一张图片展示（这不是我想要的）。有没有办法做到这一点？

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

Answer 1

您可以使用grid-template-columns通过CSS网格布局执行此操作。使用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>

Answer 2

一个迟到的答案，但这是使用伪元素的另一个技巧，你使你的div与你的div完全相同，你最后通过调整顺序。

无需添加额外的HTML

无需使用媒体查询

无需来改变您当前的CSS和flex布局

＆＃13;

.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;
}

.container:after,
.container:before {
  content: "";
  margin: 5px;
  min-width: 200px;
  padding: 10px;
  margin-left: 10px;
  flex: 1;
  order: 2;
}

＆＃13;

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

＆＃13;

Answer 3

如果您决定使用flex（由于其他一些布局限制），您可以使用一些不可见的“虚拟”div：https://jsfiddle.net/0b5dm2t2/11/

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

然后将.dummy设置为opacity

的0

或者，使用百分比的布局会为您提供所需的内容。

Answer 4

毕竟答案很好，但这是我的解决方案，在这种情况下，您可以flex-wrap: wrap;使用parent和flex-direction: column;项目。对于宽度，您可以使用calc()，但我建议您使用@media让所有items适合screen

.container {
  padding: 20px;
  background: white;
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  border: 1px solid black;
  background: #ececec;
  margin: 5px;
  width: calc(100% / 4);
  padding: 10px;
  margin-left: 10px;
  flex-direction: column;
}

JSFiddle

Answer 5

这应该是你正在寻找的。使用flex属性来控制div的增长率。

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

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

Answer 6

您需要使用媒体查询：

.container {
    padding: 20px;
    display : flex;
   flex-flow: row wrap;
   background:white;
   justify-content: space-evenly;
}

.container > div {
    border: 1px solid black;
    background: #ececec;
    margin:5px;
    min-width:200px;
    padding: 10px;
    margin-left: 10px;
}
/* only required to left align last item, defaulting to center */
@media ( min-width: 768px ) and ( max-width: 992px ) {
  .container {
    justify-content: flex-start;
  }
}

请注意：我无法为您设置确切的查询点，因为我正在使用jsfiddle窗口。你可以自己解决它。

https://jsfiddle.net/0sogzyw0/1/

Answer 7

您可以使用邻近的选择器+来限制至少有两个前面邻居的div的宽度：

.container > div + div + div {
  max-width: calc(100% / 3 - 15px);
}

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

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

7 个答案: