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

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

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

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

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

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 implementation：

.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,sed</div>
  <div class="rect" style="background-color: #D6EBF2"></div>
</div>

为什么不媒体查询？

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

解决方法

您可以通过没有高度的伪持续使用带有额外元素的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>

：注意五点好,六个盒子的行为是不同的.

原文地址：https://www.jb51.cc/css/214304.html