Elemente ausrichten

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

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

Hier ist die grundlegende Syntax zur Verwendung der Eigenschaft align-items:

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

value: Die gewünschte Ausrichtung der Flex-Elemente entlang der Querachse, die eine der folgenden sein kann:

stretch: Dies ist der Standardwert. Flex-Elemente werden entlang der Querachse gestreckt, um den Container 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 übereinstimmen.

Zum Beispiel:

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

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

In diesem Beispiel richtet das .container-start-Element seine Flex-Elemente am Anfang der Querachse aus, das .container-center-Element zentriert seine Flex-Elemente entlang der Querachse.

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit zwei <div>-Elementen gegeben, die jeweils drei untergeordnete <div>-Elemente enthalten.

Führe die folgenden Schritte aus:

Gestalte das Element .seas:
- Schreibe eine CSS-Regel, die auf das <div>-Element mit der Klasse .seas abzielt.
- Setze display auf flex, um die flexible Positionierung der untergeordneten Elemente zu ermöglichen.
- Setze die Eigenschaft align-items auf center, um die Flex-Elemente in der Mitte der Querachse auszurichten.
Gestalte das Element .oceans:
- Schreibe eine CSS-Regel, die auf das <div>-Element mit der Klasse .oceans abzielt.
- Setze display auf flex, um die flexible Positionierung der untergeordneten Elemente zu ermöglichen.
- Setze die Eigenschaft align-items auf flex-end, um die Flex-Elemente am Ende der Querachse auszurichten.

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>