我被拉伸(stretch) flex 问题困住了。 我有带元素的 flexbox div。这些元素可以拉伸(stretch)到全宽并具有 min-width 属性,因此 3-4 个元素可以适合大屏幕,1-2 个元素适合小屏幕。 我想让它们的宽度相等,但问题是如果包裹的元素数量少于顶部元素,它们会更宽。
.items {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.item {
min-width: 400px;
border: 1px solid black;
margin: 0;
height: 200px;
flex-grow: 1;
}
<div class="items">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
谢谢!
更新 02.05.2016
感谢@vals,我想出了针对不同屏幕尺寸的百分比宽度解决方案。 (但似乎我在使用 33% 宽度的元素时遇到了一些小问题,其中 1% 的空白空间留在了它们的周围 xD)
.items {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
align-items: center;
}
@media only screen and (max-width: 820px) {
.item {
width: 100%;
}
}
@media only screen and (min-width: 821px) and (max-width: 1220px) {
.item {
width: 50%;
}
}
@media only screen and (min-width: 1221px) and (max-width: 1620px) {
.item {
width: 33%;
}
}
@media only screen and (min-width: 1621px) and (max-width: 2020px) {
.item {
width: 25%;
}
}
.item {
box-sizing: border-box;
border: 1px solid black;
margin: 0;
height: 200px;
}
<div class="items">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
最佳答案
这是一个复杂的案例,您需要适应您的特定布局和存在的元素数量的媒体查询。
我对不同的媒体查询结果进行了颜色编码以帮助识别它们
此外,items 元素内还有三个额外的 div 以帮助调整尺寸
.items {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.item {
min-width: 400px;
border: 1px solid black;
margin: 0;
height: 100px;
flex-grow: 2;
}
.filler1, .filler2, .filler3 {
height: 0px;
background-color: lightgreen;
}
@media only screen and (max-width: 820px) {
/* one item per line */
.filler2, .filler3 {display: none;}
.item {background-color: yellow;}
}
@media only screen and (min-width: 821px) and (max-width: 1220px) {
/* 2 items per line */
.item:nth-last-child(4) {
order: 9;
background-color: red;
}
.filler1 {
margin-right: 100%;
}
.filler2 {
min-width: 200px;
flex-grow: 1;
order: 4;
}
.filler3 {
min-width: 200px;
flex-grow: 1;
order: 14;
}
}
@media only screen and (min-width: 1221px) and (max-width: 1620px) {
.item:nth-last-child(4), .item:nth-last-child(5) {
order: 9;
background-color: green;
}
.filler1 {
margin-right: 100%;
}
.filler2 {
min-width: 200px;
flex-grow: 1;
order: 4;
}
.filler3 {
min-width: 200px;
flex-grow: 1;
order: 14;
}
}
@media only screen and (min-width: 1621px) and (max-width: 2020px) {
.item:nth-last-child(4) {
order: 9;
background-color: lightblue;
}
.filler1 {
margin-right: 100%;
}
.filler2 {
min-width: 400px;
flex-grow: 2;
order: 4;
}
.filler3 {
min-width: 400px;
flex-grow: 2;
order: 14;
}
}
<div class="items">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="filler1"></div>
<div class="filler2"></div>
<div class="filler3"></div>
</div>
关于html - CSS 使 flex 包裹的元素不超过其 sibling 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36957811/