css - 如何让 flexbox 布局最后一行中的一个元素看起来一样？

Question

我正在尝试为矩形列表创建一些 CSS，使用环绕，这是响应式的。矩形可以包含可变数量的文本。矩形的最小宽度应为 300 像素，但如果有更多可用空间，则可以增加。无论矩形的数量如何，它都应该有效。

这是我想要的图像，在宽桌面屏幕、普通桌面屏幕和手机中，大致如下:

(我意识到大多数手机和台式机的像素都比像素宽，但是当涉及到 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 ，但我找不到一种方法来使矩形保持相同的宽度(具有不同的文本内容)，同时还允许它们在最宽的屏幕上增长。这是我最终得到的图像:

这是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>

:请注意，五个盒子没问题，六个盒子的行为不同。