CSS machen flex umwickelte Elemente nicht überschreiten ihre Geschwister Breite

Question

Ich bin auf Problem mit Dehnungsflexen stecken. Ich habe flexbox Div mit Elementen. Diese Elemente können sich über die gesamte Breite erstrecken und haben eine minimale Breite, sodass 3-4 Elemente in große Bildschirme und 1-2 in kleine Bildschirme passen. Ich möchte ihre Breiten gleich machen, aber das Problem ist, dass eingewickelte Artikel breiter sind, wenn ihre Menge weniger als auf oberen Elementen ist.

Angehängt unter meinem aktuellen Ergebnis und erwarteten Verhalten. Wie kann ich es schaffen?

.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>

Dank!

---

-Update 02.05.2016

Dank @vals kam ich mit prozentualer Breite Lösung für unterschiedliche Bildschirmgrößen ab. (Aber es scheint, ich bin etwas winziges Problem mit 33% Breite Elementen, in denen 1% Leerraum xD um sie links)

.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

Dies ist ein komplexer Fall, Sie brauchen Medienanfragen angepasst an Ihr spezifisches Layout und die Anzahl der vorhandenen Elemente.

Ich habe farbcodiert die verschiedenen Medien-Anfragen führen sie zu identifizieren

Und auch drei zusätzliche divs innerhalb des Elements Elemente mit den Abmessungen zu helfen

.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>