flex-wrap#verhindert auslaufen aus container - CSS

In der folgenden Kurzanleitung wird beschrieben, wie man mit CSS flex-wrap das Auslaufen von Inhalten aus einem Container verhindern kann.

Was ist flex-wrap?

Flex-Wrap ist eine CSS-Eigenschaft, die bestimmt, ob die Elemente in einem Flex-Container in einer einzigen Reihe oder in mehreren Reihen angeordnet werden. Durch Festlegen von flex-wrap: wrap; wird erreicht, dass sich Inhalt automatisch auf mehrere Zeilen verteilt, wenn der Container nicht breit genug ist, um den Inhalt in einer einzigen Zeile zu halten.

Wie verhindert man das Auslaufen von Inhalten aus einem Container mit flex-wrap?

Um das Auslaufen von Inhalten aus einem Container mit flex-wrap zu verhindern, gibt es zwei mögliche Ansätze:

1. Begrenzung der Breite des Inhalts Du könntest die max-width-Eigenschaft auf das Element anwenden, um sicherzustellen, dass der Inhalt nicht breiter als deine gewünschte maximale Breite wird. Beispiel:

   .container {
     display: flex;
     flex-wrap: wrap;
   }
   .child {
     max-width: 300px;
     flex: 1;
   }
   

   In diesem Beispiel wird erreicht, dass sich der Inhalt gleichmäßig auf mehrere Zeilen verteilt, ohne dass er breiter als 300px wird. Eine wichtige Ergänzung hier: Die flex-Eigenschaft wird hier verwendet, um die Breite des Inhalts auf alle verfügbaren Zeilen gleichmäßig aufzuteilen.

2. Verwendung von min-width und flex-basis Eine weitere Möglichkeit besteht darin, min-width und flex-basis auf die Elemente anzuwenden. Beispiel:

   .container {
     display: flex;
     flex-wrap: wrap;
   }
   .child {
     min-width: 300px;
     flex-basis: 33.33%;
   }
   

   Hier wird erreicht, dass jedes Element mindestens 300px breit ist und auf jeder Zeile gleichmäßig aufgestellt wird. Hier findest du eine wichtige Ergänzung: Die flex-basis-Eigenschaft wird hier verwendet, um die Größe des Inhalts an andere Inhalte auf der gleichen Zeile anzupassen.

Fazit

Flex-Wrap kann sehr nützlich sein, um die Darstellung von Inhalten in einem Flex-Container zu steuern. Je nachdem, wie dein Layout aussehen soll, gibt es unterschiedliche Ansätze, um das Auslaufen von Inhalten aus einem Container zu verhindern.