Inline, reagierende Elemente mit Flex

Question

Ich habe fünf divs, die inline und reaktionsfähig sein müssen, damit wenn eine Fenstergröße geändert wird, sie in eine neue Reihe einbrechen. Entsprechend. Und ich brauche sie gleichmäßig horizontal verteilt.

Ich kann HTML nicht bearbeiten, nur CSS. Und ich habe mehrere Dinge ausprobiert. Vom Grunddisplay: Inline-Block, zur Anzeige: flex. Aber das Beste, was ich erreichen konnte, war, sie zu inline zu ziehen und sie dann zusammenzumachen, wenn die Größe des Browsers geändert wurde. Ich bin nicht der Beste mit Flexbox und ich habe versucht, SO für Antworten durchzugehen, aber nichts, was ich anwende funktioniert.

Hier ist meine Code-Gliederung. Derzeit verteilt es die Objekte gleichmäßig, aber wie Sie sehen können, wenn das Fenster in der Größe geändert wird, werden sie nur zusammen zerschlagen. Ich möchte, dass sie in die zweite Reihe gehen, wenn das Inline nicht mehr funktioniert. So etwas wie Bootstrap-Spalten, schätze ich. Kann jemand einen Blick darauf werfen und mich wissen lassen, wie ich das machen kann?

.container { 
 
    display: flex; 
 
    text-align: center; 
 
    justify-content: space-between; 
 
} 
 

 
.item { 
 
    background-color: green; 
 
    border: 1px solid black; 
 
}

<div class="container"> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
</div>

Answer 1

hinzufügen flex-wrap: wrap und geben ihnen eine min-width

.container { 
 
    display: flex; 
 
    flex-wrap: wrap;       /* added */ 
 
    text-align: center; 
 
    justify-content: space-between; 
 
} 
 

 
.item { 
 
    background-color: green; 
 
    border: 1px solid black; 
 
    min-width: 100px;       /* added */ 
 
}

<div class="container"> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
</div>

---

Oder kombinieren flex-wrap: wrap mit 012., die sie aus dem Schrumpf über deren Inhalt

.container { 
 
    display: flex; 
 
    flex-wrap: wrap;       /* added */ 
 
    text-align: center; 
 
    justify-content: space-between; 
 
} 
 

 
.item { 
 
    background-color: green; 
 
    border: 1px solid black; 
 
    flex-shrink: 0;       /* added */ 
 
}

<div class="container"> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
    <div class="item">content goes here, just an example</div> 
 
</div>