我正在尝试为一个矩形列表创建一些CSS,包装,这是响应.矩形可以包含可变量的文本.矩形应该具有300px的最小宽度,但如果有更多可用空间,则可以增长.不管矩形的数量如何,它都应该工作.
这是一个我想要的样子,在一个宽大的桌面屏幕上,一个普通的桌面屏幕和一个手机,大概是：
@L_404_0@
(我意识到大多数手机和桌面比像素更宽,但是这些数字在使用SO的代码片段时更容易使用.)
我正在尝试三种技术,他们都没有做我想要的：
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>
为什么不媒体查询？
解决方法
您可以通过没有高度的伪持续使用带有额外元素的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>
：注意五点好,六个盒子的行为是不同的.
