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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/css/214304.html

猜你在找的CSS相关文章