Flexbox ist ein eindimensionales Layoutsystem. Das heisst, Sie können nur waagrechte oder senkrechte Konstrukte bauen.
L-förmige Figuren sind z.B. nicht darstellbar!

3 Div's ohne Flexbox:

HTML:
<div class="ohne-flex">
    <div>Wenig Text</div>
    <div>Lorem ipsum...</div>
    <div>Lorem ipsum...</div>
</div>

CSS:
.ohne-flex {
    border: 2px solid red;
}
.ohne-flex div {
    padding: 10px;
    margin: 10px;
    border: 2px solid red;
}

Ergebnis ohne Flexbox:

(Zur besseren Darstellung sind noch ein paar Abstände eingefügt)

Die 3 Div's nun mit Flexbox:

Um ein Flex-Layout zu erzeugen, muss das Elternelement mit display: flex; deklariert werden. Dadurch werden nur die direkten Nachfahren (Kind-Elemente!) zu "Flex-Items".

Auch ein Flex-Item kann später mit der CSS-Anweisung display: flex; wieder zu einem Flex-Elternelement umgewandelt werden und die Eigenschaft so an seine Kinder weitergeben.

HTML:
<div class="flex-elternelement">
    <div class="flex-item">Wenig Text</div>
    <div class="flex-item">Lorem ipsum...</div>
    <div class="flex-item">Lorem ipsum...</div>
</div>

CSS:
.flex-elternelement {
    display: flex;
    flex-direction: row; /* Browser-Default */
}

Ergebnis mit CSS display: flex;:

Wir haben hier 3 waagrechte Boxen mit gleicher Höhe. Egal wie schmal der Bildschirm wird, sie bleiben immer gleich hoch.
Die Breite der Boxen wird defaultmässig von der Inhaltsmenge bestimmt. Das kann später noch verbessert werden indem die Boxen eine width mitbekommen.

Die 3 Div's mit Flexbox: Nun übereinander

HTML:
<div class="flex-elternelement">
    <div class="flex-item">Wenig Text</div>
    <div class="flex-item">Lorem ipsum...</div>
    <div class="flex-item">Lorem ipsum...</div>
</div>

CSS:
.flex-elternelement {
    display: flex;
    flex-direction: row; /* Ist der Defaultwert und muss nicht extra angegeben werden */
    flex-direction: column;
    gap: 1.5rem;    /* Abstand zwischen den Flex-Items. NICHT aussen! */
}

Ergebnis mit CSS: flex-direction: column;

Mit einer einzigen CSS-Anweisung wird aus der waagrechten Darstellung eine senkrechte.

Die direkten Nachfahren vom Elternelement mit der Eigenschaft display: flex; können auf vielfältige Weise innerhalb des Elternelements positioniert werden.

Mit CSS-Anweisungen im Elternelement werden alle direkten Kinder angesprochen.

Waagrechte Ausrichtung mit justify-content:

HTML:
<div class="flex-elternelement">
    <div class="flex-item">Flexkind 1</div>
    <div class="flex-item">Flexkind 2</div>
    <div class="flex-item">Flexkind 3</div>
    <div class="flex-item">Flexkind 4</div>
    <div class="flex-item">Flexkind 5</div>
</div>

CSS:
.flex-elternelement {
    display: flex;
    gap: 10px;
    justify-content: flex-start; /* Defaultwert */
    
}

Ergebnis: justify-content: flex-start;

Mit justify-content: flex-start werden die Kindelemente waagrecht, am Anfang des Elternelements, ausgerichtet.

Bitte für diese Beispiele einen Desktop-PC verwenden und mit der Fensterbreite spielen. Unter 800px sieht man hier kaum keinen Unterschied. Ausserdem fliessen die Boxen, vorerst, über ihre Elternelement hinaus.

Ergebnis: justify-content: flex-end;

Mit justify-content: flex-end werden die Kindelemente waagrecht, am Ende des Elternelements, ausgerichtet.

Ergebnis: justify-content: center;

Mit justify-content: center werden die Kindelemente waagrecht, in der Mitte des Elternelements, ausgerichtet.

Ergebnis: justify-content: space-between;

Mit justify-content: space-between werden die Kindelemente waagrecht so ausgerichtet, dass der verfügbare Platz zwischen den Elementen gleichmässig aufgeteilt wird.

Ergebnis: justify-content: space-around;

Mit justify-content: space-around werden die Kindelemente waagrecht so ausgerichtet, dass der verfügbare Platz um die Kindelemente herum gleichmässig aufgeteilt wird.

Senkrechte Ausrichtung mit align-content

Achtung:
Damit die senkrechte Ausrichtung aller direkten Kind-Elemente funktionieren kann, müssen sich mehr als 1 Reihe von ihnend im Elternelement befinden

HTML:
<div class="flex-elternelement">
    <div class="flex-item">Flexkind 1</div>
    <div class="flex-item">Flexkind 2</div>
    <div class="flex-item">Flexkind 3</div>
    <div class="flex-item">Flexkind 4</div>
    <div class="flex-item">Flexkind 5</div>
    <div class="flex-item">Flexkind 6</div>
    <div class="flex-item">Flexkind 7</div>
    <div class="flex-item">Flexkind 8</div>
</div>

CSS:
.flex-elternelement {
    display: flex;
    flex-wrap: wrap; /* damit die Boxen bei Platzmangel in eine neue Reihe umbrechen */
    height: 300px;
    padding: 0;
    gap: 10px;  /* Der innere Abstand zwischen den Flex-Items, links und rechts */
    align-content: stretch; /* Defaultwert */
}

Ergebnis: ohne align-content:

Ergebnis: align-content: flex-start

Ergebnis: align-content: center

Ergebnis: align-content: flex-end

Ergebnis: align-content: space-around

Ergebnis: align-content: space-between

Senkrechte Ausrichtung mit align-items:

Achtung:
Damit die senkrechte Ausrichtung funktionieren kann, muss das Elternelement auch eine ausreichende Höhe haben. Die Kinder brauchen doch Auslauf :-)

Im Gegensatz zu dem vorherigem align-content funktioniert align-items auch mit einem z.B. einzelnem Kästchen in einer einzelnen Reihe.

HTML:
<div class="flex-elternelement">
    <div class="flex-item">Flexkind 1</div>
    <div class="flex-item">Flexkind 2</div>
    <div class="flex-item">Flexkind 3</div>
    <div class="flex-item">Flexkind 4</div>
    <div class="flex-item">Flexkind 5</div>
</div>

CSS:
.flex-elternelement {
    height: 100px;
    display: flex;
    gap: 10px;  /* Der innere Abstand zwischen den Flex-Items */
    align-items: flex-start; /* Defaultwert */
}

Ergebnis: align-items: flex-start;

Ergebnis: align-items: flex-end;

Ergebnis: align-items: center;

Ergebnis: align-items: stretch;

align-items: stretch; ist der Defaultwert und nimmt die gesamte Höhe ein.

Flex-items: "Ich will das auch mal selbst probieren..."

Jedes Flex-item richtet sich mit align-self selbst aus .

Achtung:
Damit die senkrechte Ausrichtung auch funktionieren kann, muss das Elternelement eine ausreichende Höhe haben.

HTML:
<div class="flex-elternelement">
    <div class="flex-item">flex-start</div>
    <div class="flex-item">center</div>
    <div class="flex-item">flex-end</div>
    <div class="flex-item">stretch 4</div>
    <div class="flex-item">Default</div>
</div>

CSS:
.flex-elternelement {
    display: flex;
    height: 150px; /* Platz machen für align */
    justify-content: space-around; /* waagrecht ausrichten */
    gap: 10px;
}

.flex-elternelement .flex-item:nth-of-child(1) {
    align-self: flex-start;
}
.flex-elternelement .flex-item:nth-of-child(2) {
    align-self: center;
}
.flex-elternelement .flex-item:nth-of-child(3) {
    align-self: flex-end;
}
.flex-elternelement .flex-item:nth-of-child(4) {
    align-self: stretch;
}

Ergebnis: align-self:...;

Flexbox: Die Reihenfolge mit order ändern

Würde ich nicht machen wegen der "Tab Order"! Andererseits ... :-)

Mit dem Flexbox-Layout kann man auch die Reihenfolge, die im Html-Code vorgegeben ist, ändern, ohne in den Html-Code einzugreifen.

HTML:
<div class="flex-elternelement">
    <div class="flex-item">Flexkind 1</div>
    <div class="flex-item">Flexkind 2</div>
    <div class="flex-item">Flexkind 3</div>
    <div class="flex-item">Flexkind 4</div>
    <div class="flex-item">Flexkind 5</div>
</div>

CSS:
.flex-elternelement {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.flex-elternelement .flex-item:nth-of-child(1) {
    order: 19
}
.flex-elternelement .flex-item:nth-of-child(2) {
    order: 1
}
.flex-elternelement .flex-item:nth-of-child(3) {
    order: 0
}
.flex-elternelement .flex-item:nth-of-child(4) {
    order: 0
}
.flex-elternelement .flex-item:nth-of-child(5) {
    order: -1
}

- Alle Flex-items haben als Defaultwert "order: 0".
- Items mit einem höheren Wert werden in der Html-Reihenfolge nach hinten/unten verschoben.
- Haben zwei Items den selben order-Wert (z.B. 2, 2) gilt die Reihenfolge im Html-Flow.

Normale Reihenfolge wie im Html-Code: ohne "order"

Ergebnis mit: order:...;

Am Besten alles wieder vergessen!

Hier kommt leider so kompliziertes Zeugs wie
flex-grow
flex-shrink
flex-basis
ins Spiel

flex grow, flex shrink und flex basis verteilen den freien Platz oder steuern das Schrumpfen, wenn das Platzangebot des Flex-Elternelements zu klein oder zu groß für die Flex-Items ist.

Diese Eigenschaften muss in den Flex-Kindern platziert werden!

flex-grow:

Der flex-grow: Wert bestimmt den Wachsumsfaktor eines Flex-Items.

flex-shrink:

Der flex-shrink: legt fest, um welchen Faktor ein Flex-Item gegenüber den anderen Flex-Items schrumpft, wenn der Raum des Flex-Containers zu klein wird. Der Vorgabewert ist 1 – anteilig. flex-shrink : 0 verhindert das Verkleinern des Flex-Items.

flex-basis:

Der flex-basis: Wert setzt die anfängliche Mindestgrösse des Flex-Kindes. Sofern nicht anderweitig schon angegeben.

Ein Beispiel mit den Browser-Defaultwerten für grow, shrink und basis:

Bei den folgenden Beispielen sollte der Bildschirm in seiner Breite verändert werden können um die jeweiligen Effekte zu überprüfen. Das funktioniert am Besten mit einem Desktop.

/* ======================
Defaultwerte lt. https://www.w3.org/TR/css-flexbox-1/
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
======================= */
                
HTML:
<div class="flex-elternelement">
    <div>Flexkind 1</div>
    <div>Flexkind 2</div>
    <div>Flexkind 3</div>
    <div>Flexkind 4</div>
    <div>Flexkind 5</div>
</div>

CSS:
.flex-elternelement {
    display: flex; 
    gap: 10px;
}

.flex-elternelement div:nth-of-child(1) {keine Angaben}
.flex-elternelement div:nth-of-child(2) {somit}
.flex-elternelement div:nth-of-child(3) {Browser-Default}
.flex-elternelement div:nth-of-child(4) {Werte}
.flex-elternelement div:nth-of-child(5) {...}

Ohne display: flex; würden die Kästchen jetzt untereinander stehen weil sie Blockelemente (DIV's) sind und somit die gesamte verfügbare Breite einnehmen würden.

Mit display: flex; im Elternelement stehen sie aber nun nebeneinander weil hier der CSS-Defaultwert des Browsers flex-direction: row; ist.

Der Inhalt bestimmt momentan die Breite der Flex-items. Gleicher Inhalt = Gleiche Breite. Wegen des fehlenden Inhaltes wird auch das Elternelement nicht vollständig ausgefüllt. Das sieht man nur bei genügend breitem Bildschirm, nix Handy! :-)

Beim Zusammenschieben des Browserfensters verhalten sich die Kästchen recht "elastisch" bis sie bei ca. 530px aus dem Elternelement überschwappen ("Overflow").
Die Länge der Wörter "Flexkind" und "Zusatztext" sowie "gap: 10px;" bestimmen hier den Zeitpunkt des Overflows.

Jetzt kommt flex-grow ins Spiel

Hier kann man schön die Wirkung von flex-grow beobachten.
Als erstes wird das Elternelement vollständig gefüllt.
Flexkind 1, 2, 3 wachsen wenn der Bildschirm vergrössert wird.
Flexkind 4 + 5 bleiben unverändert. Hier bestimmt der Inhalt die Breite.
Flexkind 1 dehnt sich etwas aus.
Flexkind 2 wächst doppelt so viel wie 1.
Flexkind 3 wächst 3 mal soviel wie Flexkind 1.
Beim Verkleinern des Bildschirms auf ca. <510px beginnt wieder der Overflow. Wie man das vermeidet sehen wir etwas später.

flex-grow: Nur beim zweiten Kind

Bei Flex-Kind 1, 3, 4 und 5 sind keine Angaben von flex-grow (flex-grow: 0;) Sie schrumpfen auf den Textinhalt.

Was mir hier auffällt:
Das zweite Flex-Kind dehnt sich mehr als 2-fach aus!?

flex-grow: Das interessiert mich jetzt aber ;-)

Alle Flexkinder jetzt mit (flex-grow: 1;) und Kind 2 mit (flex-grow: 2;)

Ok, das sieht jetzt besser aus.

flex-grow: Wie vorher aber mit mehr Inhalt

Erkenntnis:
Bei viel Inhalt macht sich flex-grow: 2; kaum bemerkbar. Letztendlich ist ja auch kein überschüssiger Platz verfügbar.

flex-shrink: Ab hier wird jetzt unbarmherzig "geshrinkt":

Defaultwerte:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

Erkenntnis:
Ich blick' nicht mehr durch!
Der Textinhalt hat auf jeden Fall grossen Einfluss.

Das Ganze nochmal mit wenig Text:

Erkenntnis:
text

flex-basis:

Beim Verkleinern des Browserfensters schrumpft Flex-Kind 2 wegen flex-shrink: 2; mehr als Kind 1 + 2.

Umgekehrt vergrössert sich Flex-Kind 2 auf bis zu 500px wegen flex-basis: 500px;. Die ursprüngliche Angabe von width: 300px; wird ignoriert.

flex-wrap: Flex-Items umbrechen

Um Flex-Kinder bei Platzmangel im Elternelement in eine neue Reihe springen zu lassen gibt es die Eigenschaft flex-wrap:

flex-wrap: wird im Elternelement platziert.

HTML:
<div class="flex-elternelement">
    <a href="#0">Flexkind 1<a>
    <a href="#0">Flexkind 2<a>
    <a href="#0">Flexkind 3<a>
    <a href="#0">Flexkind 4<a>  
</div>

CSS:
.flex-elternelement {
    display: flex;
    flex-wrap: wrap; /* Siehe unten */
    border: 2px solid red;
}

.flex-elternelement a {
    width: 230px;
    text-decoration: none;
    text-align: center;
    padding 10px;
    margin: 10px;
    border: 2px solid green;
}

Beispiel: Das Verhalten der normalen Kind-Elemente mit einer Breite von 230px (ohne display: flex; und flex-wrap)

Bei kleiner als 730px gibt es Chaos!

Nun das Verhalten, jetzt als Flex-Kinder, mit einer Breite von 230px (mit display: flex; und ohne flex-wrap)

Hmm,- obwohl die Kind-Elemente eine Breite von 230px haben schieben sie sich bei Platzmanel zusammen!

Wie vorher, aber nun mit display: flex und flex-wrap: wrap;

Sobald der Platz im Elternelement nicht mehr ausreicht, springen die Flex-Kinder in eine neue Reihe.

Beispiel: wie vorher, zusätzlich mit flex-grow: 1; bei den Flex-Kindern:

Im Gegensatz zu dem vorherigen Beispiel sieht man schön die Vorteile von Flexbox-Layout.
Dass das nach unten umspringende Element dann den gesamten Platz einnimmt kann man vermeiden, indem man den Flex-Kindern eine feste Breite mitgibt.

Also tun wir's: flex-direction: column;

HTML:
<div class="flex-wrapper"> /* Damit sich das nachfolgende Konstrukt an den Wrapper anpasst */
    <div class="flex-elternelement">
        <div class="flex-item">Flexkind 1</div>
        <div class="flex-item">Flexkind 2</div>
        <div class="flex-item">Flexkind 3</div>
        <div class="flex-item">Flexkind 4</div>
    </div>
<div>

CSS:

.flex-wrapper {
    display: inline-block;
}

.flex-elternelement {
    display: flex;
    flex-direction: siehe unten
    gap: 10px;
    padding: 10px;
    border: 2px solid red;
}

flex-direction: row:

flex-direction: column:

HTML:
<div class="flex-elternelement">
    <header>
        <h1>Einfaches Flexbox Beispiel</h1>
    </header>
    
    <section>
        <article>
            <h2>Erster Artikel</h2>
            <p>
                Lorem ipsum dolor...
            </p>
        </article>
        <article>
            <h2>Zweiter Artikel</h2>
            <p>
                Lorem ipsum dolor...
            </p>
        </article>
        <article>
            <div>
                <button>Button 1</button>
                <button>Button 2</button>
                <button>Button 3</button>
                <button>Button 4</button>
                <button>Button 5</button>
            </div>
            <p>
                Lorem ipsum dolor...
            </p>
        </article>
    </secction>
</div>

CSS:
.flex-elternelement {
    ........ /* irgendwas sinnvolles */
}

.flex-elternelement header {
    background: purple;
}

.flex-elternelement h1 {
    text-align: center;
    color: white;
    line-height: 80px;
    margin: 0;
}

.flex-elternelement article {
    padding: 10px;
    margin: 10px;
    background: aqua;
}

/* Ab hier Flex-design */
.flex-elternelement section {
    display: flex;
}

/* Alle Artikel sollen gleich wachsen */
.flex-elternelement article {
    flex: 1 200px;
}

/* Den dritten Artikel als columns anzeigen
und er soll 3-fach wachsen */
.flex-elternelement article:nth-of-type(3) {
    flex: 3 200px;
    display: flex;
    flex-flow: column;
}

/* Im dritten Artikel das erste DIV, 
darin sind die Buttons */
.flex-elternelement article:nth-of-type(3) div:first-child  {
    flex: 1 100px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
}

.flex-elternelement button {
    flex: 1 auto;
    margin: 5px;
    font-size: 18px;
    line-height: 1.5;
}

Beispiel 1: Flexbox Layout

Beispiel 2: Float, Flex und Grid gemischt

Layout 2 mit Flex-box. Die Navigation bleibt am oberen Bildschirmrand "kleben" wegen "z-index: 1;".

Was wir tun...

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.

Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.