Align Items

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 47 von 76.

In CSS steuert die align-items-Eigenschaft, wie Flex-Elemente entlang der Querachse (das Gegenstück zur Hauptachse) ausgerichtet werden. Sie hilft dabei, Elemente vertikal in einer Zeile oder horizontal in einer Spalte zu positionieren. Diese Eigenschaft ist nützlich, um Layouts flexibler und responsiver zu gestalten.

Hier ist die grundlegende Syntax für die Verwendung der align-items-Eigenschaft:

.container {
    display: flex;
    align-items: value;
}

value: Die gewünschte Ausrichtung für die Flex-Elemente entlang der Querachse, die einer der folgenden Werte sein kann:

stretch: Dies ist der Standardwert. Flex-Elemente werden gestreckt, um den Container entlang der Querachse auszufüllen, wobei min-width/max-width und min-height/max-height berücksichtigt werden.

flex-start: Flex-Elemente werden am Anfang der Querachse platziert.

flex-end: Flex-Elemente werden am Ende der Querachse platziert.

center: Flex-Elemente werden entlang der Querachse zentriert.

baseline: Flex-Elemente werden so ausgerichtet, dass ihre Grundlinien (Baselines) übereinstimmen.

Zum Beispiel:

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

In diesem Beispiel wird das .container-start-Element seine Flex-Elemente am Anfang der Querachse ausrichten, das .container-center-Element wird seine Flex-Elemente entlang der Querachse zentrieren.

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit zwei Divisionen (<div>) gegeben, die jeweils drei Kind-Divisionen enthalten.

Befolgen Sie die folgenden Schritte:

Stylen Sie das <strong>.seas</strong> Element:
- Schreiben Sie eine CSS-Regel, die das <div>-Element mit der Klasse .seas anspricht.
- Setzen Sie display auf flex, um die flexible Positionierung der Kind-Elemente zu ermöglichen.
- Setzen Sie die Eigenschaft align-items auf center, um die Flex-Elemente in der Mitte der Querachse auszurichten.
Stylen Sie das <strong>.oceans</strong> Element:
- Schreiben Sie eine CSS-Regel, die das <div>-Element mit der Klasse .oceans anspricht.
- Setzen Sie display auf flex, um die flexible Positionierung der Kind-Elemente zu ermöglichen.
- Setzen Sie die Eigenschaft align-items auf flex-end, um die Flex-Elemente am Ende der Querachse auszurichten.

Spickzettel

Die align-items-Eigenschaft steuert, wie Flex-Elemente entlang der Querachse (Gegenteil der Hauptachse) ausgerichtet werden:

.container {
    display: flex;
    align-items: value;
}

Verfügbare Werte:

stretch: Standardwert. Elemente werden gestreckt, um den Container auszufüllen
flex-start: Elemente werden am Anfang der Querachse platziert
flex-end: Elemente werden am Ende der Querachse platziert
center: Elemente werden entlang der Querachse zentriert
baseline: Elemente werden an ihren Basislinien ausgerichtet

.container-start {
    display: flex;
    align-items: flex-start;
}

.container-center {
    display: flex;
    align-items: center;
}

Probier es selbst

<html>
<head>
    <title>Align Items</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* Added for visualization */
            border: 2px solid darkblue; /* Added for visualization */
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="seas">
            <div>Black Sea</div>
            <div>Caribbean Sea</div>
            <div>Dead Sea</div>
        </div>
        <div class="oceans">
            <div>Atlantic Ocean</div>
            <div>Pacific Ocean</div>
            <div>Indian Ocean</div>
        </div>
    </div>
</body>
</html>