CSS:Flex正在调整下一行div的大小
问题描述:
我的问题是,无论何时调整窗口大小,如果没有与所有其他div的大小相同的大小,div应该跳到下一行。CSS:Flex正在调整下一行div的大小
在“整页”中查看此内容并尝试调整自己的大小。
<html>
<body>
<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;">
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
</div>
</body>
</html>
答
他们不能对第二排同样大小与给定的设置。
而原因是,当你设置flex: 13px
,这意味着flex: 1 1 13px
,因此他们会成长,如果有剩余空间,直到他们到达max-width
,以及何时空间不大,他们会收缩,直到到达min-width
。
也没有可能检测项目换行的时间,因此要保持min/max-width
概念,您需要添加几个媒体查询。
注意,在CSS中使用的!important
需要重写250px
栈的内联值片断
body {
margin: 0;
}
#wrapper div {
box-sizing: border-box;
}
@media (max-width: 900px) {
#wrapper div:nth-child(6) { /* 6th child */
max-width: calc(100%/5) !important;
}
}
@media (max-width: 750px) {
#wrapper div:nth-child(n+5) { /* from 5th child */
max-width: calc(100%/4) !important;
}
}
@media (max-width: 600px) { /* from 4th child */
#wrapper div:nth-child(n+4) {
max-width: 250px !important;
}
}
<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;">
<div id="content1" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content2" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content3" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content4" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content5" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content6" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
</div>
答
变化justify-content
从center
到flex-start
在#wrapper
这是在默认情况下是flex-start
,然后将它对准孩子divs
到left
每用户调整大小的时间。
<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content:flex-start;">
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
</div>
答
从div
删除flex: 13px;
。另外,您对所有div都使用相同的id
,请删除它。我用class
代替。
下面是解决
#wrapper {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.content {
text-align: center;
background-color: red;
border: 3px solid grey;
height: 200px;
min-width: 150px;
max-width: 250px;
}
<html>
<head>
</head>
<body>
<div id="wrapper">
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
</div>
</body>
</html>
+0
现在它们不再弯曲,宽度在150px - 250px之间。 – LGSon
[相等宽度挠曲项目甚至船尾呃他们换行](https://*.com/q/44154580/3597276) –