css 判断行元素中的最后一个,css – 如何在Flexbox布局的最后一行中找到一个单独的元素,看起来是一样的？...

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

这是一个我想要的样子,在一个宽大的桌面屏幕上,一个普通的桌面屏幕和一个手机,大概是：

(我意识到大多数手机和桌面比像素更宽,但是这些数字在使用SO的代码片段时更容易使用.)

我正在尝试三种技术,他们都没有做我想要的：

FlexBox不工作：

FlexBox似乎是理想的工作. flexBox实现的麻烦在于,我找不到一种方法来确保最后一个矩形与其余矩形保持相同的大小,同时也允许矩形在非常宽的屏幕中增长.这是我可以想出的最好的flexBox结果的图像,最后一行有问题：

这是FlexBox实现的代码：

.container {

display: flex;

flex-wrap: wrap;

}

.rect {

flex: 1 0 300px;

height: 150px;

}

2. float：left技术不行：

另一个反应灵敏的技术是使用浮点数,但是我找不到一种保持矩形相同宽度(具有不同文本内容)的方式,同时也允许它们在最宽的屏幕中增长.以下是我最终结论的形象：

这里是float的代码：left implementation：

.container:after {

content: "";

clear: both;

}

.rect {

float: left;

min-width: 300px;

height: 150px;

overflow-y: hidden;

}

Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod

Lorem ipsum dolor sit amet,consectetur

Lorem ipsum dolor sit amet,sed

为什么不媒体查询？

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