Flexbox - Umbruch, Abstand & Größe

Umbruch: `flex-wrap`

Standardmäßig zwingt Flexbox alle Kinder in eine einzige Zeile - notfalls werden sie zusammengequetscht. Mit flex-wrap erlaubt ihr einen Umbruch auf eine neue Zeile:

.projects {
  display: flex;
  flex-wrap: wrap;
}

nowrap (Standard): alles bleibt in einer Zeile, Elemente schrumpfen notfalls
wrap: passt keine Reihe mehr rein, geht’s in der nächsten weiter
wrap-reverse: wie wrap, aber neue Zeilen werden nach oben statt nach unten gestapelt

⚠️ Ohne flex-wrap: wrap kann eine Reihe von Cards auf einem schmalen Bildschirm ziemlich hässlich zusammengequetscht werden - für responsive Layouts ist wrap fast immer eine gute Idee.

Abstand zwischen Elementen: `gap`

.projects {
  display: flex;
  gap: 16px;          /* Abstand in beide Richtungen */
  /* row-gap: 16px;      nur zwischen Zeilen */
  /* column-gap: 24px;   nur zwischen Spalten */
}

Elemente strecken: `flex-grow`

Elemente können sich ausdehnen, um zusätzlichen Platz im Container einzunehmen:

.box1, .box3 {
  flex-grow: 1;
}
.box2 {
  flex-grow: 2;
}

flex-grow ist ein Verhältnis, kein fixer Wert: Ist insgesamt Platz übrig, verteilt er sich im Verhältnis der Werte. Bei 1 / 2 / 1 bekommt .box2 doppelt so viel vom übrigen Platz wie .box1 oder .box3.

Die Kurzschreibweise: `flex`

In der Praxis schreibt man flex-grow, flex-shrink und flex-basis fast immer zusammen als Kurzschreibweise:

.sidebar {
  flex: 0 0 250px; /* grow: 0, shrink: 0, basis: 250px - feste Breite */
}
.main {
  flex: 1 1 0;      /* grow: 1, shrink: 1, basis: 0 - nimmt den Rest ein */
}

Wert	Bedeutung
`flex-grow`	darf das Element wachsen, wenn Platz übrig ist? (0 = nein)
`flex-shrink`	darf das Element schrumpfen, wenn zu wenig Platz ist? (0 = nein)
`flex-basis`	Ausgangsgröße, bevor grow/shrink angewendet werden