如何在flexbox布局的最后一行中获得单独的元素以使其看起来相同？

Question

我正在尝试为一个矩形列表创建一些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 ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</div>
  <div class="rect" style="background-color: #2D9CDB"></div>
  <div class="rect" style="background-color: #56CCF2">Lorem ipsum dolor sit amet, consectetur</div>
  <div class="rect" style="background-color: #A6E2F5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</div>
  <div class="rect" style="background-color: #D6EBF2"></div>
</div>

3.为什么不进行媒体查询？

我正在寻找一种不涉及媒体查询的解决方案,因为媒体查询只允许您在屏幕宽度上放置条件,而不是.container宽度.

Answer 1

您可以通过没有高度的伪元素继续使用带有额外元素的 flex ：

.container {
  display: flex;
  flex-wrap: wrap;
  background:gray;/*see me */
}
.container:after {
  content:'';
  flex: 1 0 300px;
  margin-bottom:auto;
  }
.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>

：请注意，对于五个盒子来说没问题，对于六个盒子来说行为是不同的。