Flexbox

Der Flex-Container, auch bekannt als die Box der Flexibilität, ist eine wahrhaft magische Erfindung. In ihm herrscht immer Ordnung, auch wenn die Dinge drinnen nicht gerade stillstehen. Die Flex-Items, so nennt man die Gegenstände in dieser Box, haben eine bemerkenswerte Eigenschaft: Sie passen sich an den Platz an, der ihnen zur Verfügung steht, wie Objekte auf einer magischen Tafel, die sich einfach in die Lücken schmiegen – egal, wie groß oder klein diese Lücken sind.

Mit dem Befehl display:flex bringst du deine Flex-Items ordentlich in eine horizontale Linie. Doch Vorsicht! Ohne genaue Anweisungen kann es passieren, dass deine Items aus der Box purzeln und einen horizontalen Scrollbalken hinterlassen – ein unheilvoller Fehler, den es zu vermeiden gilt. Wenn du möchtest, dass sie artig im Container bleiben, musst du ihnen beibringen, wie sie sich richtig verhalten.

Manchmal wird es eng für deine Flex-Items. Mit flex-wrap kannst du sie sanft auf mehrere Zeilen oder Spalten verteilen, anstatt sie unkontrolliert aus dem Bildschirm purzeln zu lassen. Aber Achtung: Verleihe den Kindern eine klare Größe, sonst drängeln sich alle in einer einzigen Reihe zusammen.

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

.flex>div {
    width: 25%;
}

Oder setze nowrap, wenn du möchtest, dass sich alle Kinder brav in einer Reihe aufstellen. Für direkte Kinder wie div kannst du eine feste Größe von 25% zuweisen, damit sie sich gleichmäßig verteilen.

Mit flex-direction entscheidest du, ob deine Flex-Items in einer Reihe oder Spalte angeordnet werden. Es ist, als würdest du ihnen sagen: „nebeneinander“ (column) oder „untereinander“ (row)

.flex {
    display: flex;
    flex-direction: row;
}

Mit flex-direction: row; richtest du deine Flex-Items in einer horizontalen Reihe aus, von links nach rechts.

flex-flow ist die Kurzschreibweise für flex-direction und flex-wrap. Es erlaubt dir, beide Eigenschaften in einem Zauber zusammenzufassen.

.flex {
    display: flex;
    flex-flow: row wrap;
}

Hier legst du fest, dass die Flex-Items in einer Reihe angeordnet werden und bei Bedarf in die nächste Zeile umbrechen.

Mit column-reverse schickst du deine Flex-Items in einer Spalte auf eine Kopfsteh-Reise, von unten nach oben. Und für horizontale Abenteuer gibt es row-reverse, um alles rückwärts zu ordnen – perfekt, wenn du die Ordnung mal ordentlich verdrehen willst.

.flex {
    display: flex;
    flex-direction: column-reverse;
}

Hier kehrst du die vertikale Reihenfolge deiner Flex-Items um.

Mit gap schaffst du Platz zwischen deinen Flex-Items, ohne sie aus der Ordnung zu bringen – wie ein unsichtbarer Puffer, der sicherstellt, dass sich die Items nicht gegenseitig auf die Füße treten. Es ist, als würdest du kleine Wände zwischen deinen Flex-Items stellen, damit sie genug Platz zum Atmen haben.

.container {
    display: flex;
    gap: 20px 5px;
}

Mit einem Wert wie gap: 10px entsteht überall derselbe Abstand, und mit zwei Werten, wie gap: 10px 20px, bestimmst du zuerst den vertikalen und dann den horizontalen Abstand – ganz nach deinem Wunsch.

justify-content

Horizontal – alles in Balance

Die Kunst von justify-content liegt darin, deine Flex-Items entlang der horizontalen Linie auszubalancieren. Stell dir einen Zauber vor, der bestimmt, ob die Items links aneinander gekuschelt stehen, sich in der Mitte versammeln oder bis an den rechten Rand der magischen Box verstreut werden. Und für noch mehr Eleganz kannst du sie gleichmäßig verteilen, mit Platz zwischen oder rund um jedes Item – alles, was dein Flex-Herz begehrt!

Die wichtigsten Zauberformeln sind:

flex-start / start: Die Items scharen sich links zusammen. (Standard)
flex-end / end: Sie rücken bis an den rechten Rand.
center: Alles trifft sich feierlich in der Mitte.
space-between: Die Items verteilen sich
gleichmäßig mit Abstand dazwischen.
space-around: Ein Hauch von Freiraum schwebt um jedes Item herum.

align-items

die vertikale Magie der Flexboxen

Die Kunst von align-items liegt darin, deine Flex-Items entlang der vertikalen Linie auszurichten. Stell dir einen Zauber vor, der bestimmt, ob die Items links aneinandergekuschelt stehen, sich in der Mitte versammeln oder bis an den rechten Rand der magischen Box verstreut werden. Und für noch mehr Eleganz kannst du sie gleichmäßig verteilen, mit Platz zwischen oder rund um jedes Item – alles, was dein Flex-Herz begehrt!

Die wichtigsten Zauberformeln sind:

flex-start / start: Die Items sammeln sich
am oberen Rand (oder am Anfang der Querachse).
flex-end / end: Hier rutschen die Items
bis zum unteren Rand.
center: Die Items finden sich harmonisch
in der Mitte wieder.
stretch: Sie dehnen sich, um die gesamte Höhe des Containers auszufüllen (wenn sie können).
baseline: Die Items richten sich entlang ihrer Text-Baselines aus, wie auf einer unsichtbaren Linie.

Mit order gibst du jedem Flex-Item seine eigene Position, ganz unabhängig von der Reihenfolge im HTML-Code. Du bist der Regisseur, und die Flex-Items tanzen, wie du es willst!

.item {
    order: 2;
}

Mit order: 2; bestimmst du, dass dieses Flex-Item an die zweite Stelle rückt, unabhängig von seiner ursprünglichen Position.

Mit gap schaffst du Platz zwischen deinen Flex-Items, ohne sie aus der Ordnung zu bringen – wie ein unsichtbarer Puffer, der sicherstellt, dass sich die Items nicht gegenseitig auf die Füße treten. Es ist, als würdest du kleine Wände zwischen deinen Flex-Items stellen, damit sie genug Platz zum Atmen haben.

.item {
		align-self:center;
}

align-self bietet dieselben Werte wie align-items, erlaubt es jedoch, die Ausrichtung eines einzelnen Flex-Items individuell anzupassen, während die übrigen Items der allgemeinen Ausrichtung des Containers folgen

Wenn du möchtest, dass alle Spalten in deinem Flex-Container gleich groß sind, kommt der Befehl flex: 1; ins Spiel. Er sorgt dafür, dass jedes Flex-Item den gleichen verfügbaren Platz einnimmt, wie eine magische Formel, die die Größe der Items ausbalanciert. Egal wie viele Items du hast, jedes erhält den gleichen Anteil, wodurch sie alle gleichmäßig aufgeteilt werden.

.item {
		flex:1;
}

In diesem Beispiel haben alle Items denselben Anteil am verfügbaren Platz und füllen die Container-Breite gleichmäßig aus – so wird jede Spalte gleich groß, ohne dass du die genaue Breite jedes Items festlegen musst.

flex-grow ist ein magischer Befehl, der einem Flex-Item erlaubt, mehr Platz einzunehmen, wenn in seinem Container noch Platz übrig ist. Mit diesem Befehl kannst du festlegen, welches Item wie viel wachsen soll, wenn der Container größer ist als die Summe der benötigten Platz-anforderungen der Items. Die möglichen Werte von flex-grow sind einfache Zahlen:

0: Das Item wächst nicht – es bleibt so groß, wie es ursprünglich ist. Das ist auch der Standardwert.

1 oder höher: Das Item kann wachsen und nimmt zusätzlichen Platz proportional zu den anderen Items ein.

.item1 {
    flex-grow: 1;
}

.item2 {
    flex-grow: 2;
}

Hier wird item2 doppelt so viel zusätzlichen Platz einnehmen wie item1, wenn der Container noch Platz übrig hat. So kannst du die Verteilung des freien Raums individuell steuern!

flex-shrink ist der Gegenzauber zu flex-grow – er bestimmt, wie sehr ein Flex-Item schrumpfen darf, wenn der Platz im Container knapp wird. Mit diesem Befehl kannst du festlegen, ob und wie stark ein Item verkleinert werden soll, wenn nicht genug Platz für alle Items vorhanden ist. Die möglichen Werte von flex-shrink sind ebenfalls einfache Zahlen:

0: Das Item schrumpft nicht – es behält seine ursprüngliche Größe bei, auch wenn der Platz knapp wird.

1 oder höher: Das Item darf schrumpfen. Je größer der Wert, desto stärker wird es verkleinert im Vergleich zu anderen Items.

.item1 {
    flex-shrink: 1;
}

.item2 {
    flex-shrink: 2;
}

In diesem Beispiel wird item2 stärker verkleinert, wenn der Container zu klein wird, während item1 nur moderat schrumpft. So kannst du gezielt steuern, welches Item bei Platzmangel Vorrang hat!

flex-basis definiert die Grundgröße eines Flex-Items, bevor es beginnt zu wachsen oder zu schrumpfen. Ein solider Start für die Flex-Magie.

.item {
    flex-basis: 200px;
}

In diesem Beispiel startet dein item mit einer festen Breite von 200 Pixeln. Du kannst anderen items zusätzlich individuelle Größen zuordnen.

Mit flex kannst du flex-grow, flex-shrink und flex-basis in einer einzigen Zeile kombinieren. So bestimmst du genau, wie ein Item wachsen, schrumpfen und sich ausbreiten soll. Kurz gesagt: Mit flex: 1 1 12em; gibst du dem Item eine anfängliche Größe von 12em, erlaubst ihm zu wachsen, wenn Platz übrig ist, und lässt es schrumpfen, wenn der Container zu klein wird. Eine vielseitige und flexible Lösung für alle Platzverhältnisse!

.item {
    flex: 1 1 12em;
}

Dieses Item hat eine Basis von 12em, kann wachsen und schrumpfen