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>