CSS Flexbox - Automatische Größenanpassung und gleiche Breite

Question

Ich habe versucht, Flexbox Artikel gleich Größe und automatische Größenanpassung von Min-Breite zu Max-Breite, um den Container passen aber nicht funktionieren. Bitte hilf mir.

.flex-container { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex-item { 
 
    background-color: #ff0000; 
 
    min-height: 100px; 
 
    min-width: 100px; 
 
    max-width: 200px; 
 
    margin: 4px; 
 
    flex: 1 1 auto; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
</div>

Answer 1

Wenn Sie die Einzelteile in der letzten Zeile die gleiche Breite wie die Elemente auf den vorherigen Linien machen wollen, dann ist es nicht möglich, in Flexbox (und ohne unsaubere wie das Hinzufügen von unsichtbaren Platzhalter Elementen nach die echten usw.). Aber es kann leicht mit CSS Grids, zum Beispiel geschehen:

.grid-container { 
 
    display: grid; 
 
    grid-auto-rows: 100px; 
 
    grid-template-columns: repeat(auto-fit, minmax(100px,1fr)); 
 
    margin: 4px; 
 
    grid-gap: 8px; 
 
} 
 

 
.grid-item { 
 
    background-color: #ff0000; 
 
    max-width: 200px; 
 
}

<div class="grid-container"> 
 
    <div class="grid-item"></div> 
 
    <div class="grid-item"></div> 
 
    <div class="grid-item"></div> 
 
    <div class="grid-item"></div> 
 
    <div class="grid-item"></div> 
 
    <div class="grid-item"></div> 
 
    <div class="grid-item"></div> 
 
    <div class="grid-item"></div> 
 
    <div class="grid-item"></div> 
 
</div>