CSS让柔性包裹元素不超过他们的兄弟宽度

Question

我被困在伸展柔性的问题上。 我有flexbox div项目。这些项目可以拉伸到全宽，并具有最小宽度的属性，所以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>

谢谢！

---

更新2016年2月5日

感谢@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>

Answer 1

这是一个复杂的情况下，你需要媒体查询适合您的具体布局和存在的元素数量。

我有颜色区分不同的媒体查询结果，以帮助确定他们

而且也，项目元素中三个额外的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>