我的问题是我希望flexbox具有可变范围宽度,并且一切正常,但不是最后一行.我希望所有孩子都有相同的维度,即使行没有孩子(最后一行).

#products-list {
    position:relative;
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

#products-list .product {
    min-width:150px;
    max-width:250px;
    margin:10px 10px 20px 10px;
    flex:1;
}

在JSFiddle示例中,我创建了一个动态情境.

我的flex div可以缩小到150px并且长到250px,但所有都必须具有相同的大小(显然我想要一个CSS解决方案,JS我知道的方式).

我正在尝试为一个矩形列表创建一些CSS,包装,响应.矩形可以包含可变数量的文本.矩形的最小宽度应为300px,但如果有更多可用空间,则可以增长.它应该工作无论矩形的数量.

这是我希望它在大型桌面屏幕,普通桌面屏幕和手机中看起来像的图像,粗略地说:

(我意识到大多数手机和台式机都比像素更宽,但这些数字在SO的代码片段中更易于使用.)

我正在尝试三种技术,但没有一种能够做到我想要的:

1. Flexbox不起作用:

Flexbox似乎是这项工作的理想选择.flexbox实现的问题在于我无法找到确保最后一个矩形与其余矩形保持相同大小的方法,同时还允许矩形在非常宽的屏幕中生长.这是我能想出的最好的flexbox结果的图像,最后一行有问题:

这是flexbox实现的代码:

.container {
  display: flex;
  flex-wrap: wrap;
}
.rect {
  flex: 1 0 300px;
  height: 150px;
}

<div class="container">
  <div class="rect" style="background-color: #2F80ED"></div>
  <div class="rect" style="background-color: #2D9CDB"></div>
  <div class="rect" style="background-color: #56CCF2"></div>
  <div class="rect" style="background-color: #A6E2F5"></div>
  <div class="rect" style="background-color: #D6EBF2"></div>
</div>

2. float: left技术不起作用:

另一种响应技术是使用浮点数,但我找不到一种方法来保持矩形的宽度相同(具有不同的文本内容),同时还允许它们在最宽的屏幕中生长.这是我最终得到的图像:

这是实现的代码float: left:

.container:after {
  content: "";
  clear: both;
}
.rect {
  float: left;
  min-width: 300px;
  height: 150px;
  overflow-y: hidden;
}

<div class="container">
  <div class="rect" style="background-color: #2F80ED">Lorem …