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 entgegengesetzten 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 der Flex-Elemente entlang der Querachse, die eine der folgenden sein kann:

stretch: Dies ist der Standardwert. Flex-Elemente werden entlang der Querachse so gestreckt, dass sie den Container ausfü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 aufeinander ausgerichtet sind.

Zum Beispiel:

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

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

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

Aufgabe

Einfach

Du erhältst ein HTML-Dokument mit zwei Bereichen (<div>), die jeweils drei untergeordnete Bereiche enthalten.

Befolge die folgenden Schritte:

Formatiere das <strong>.seas</strong>-Element:
- Schreibe eine CSS-Regel, die auf das <div>-Element mit der Klasse .seas abzielt.
- Setze display auf flex, um eine 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.
Formatiere das <strong>.oceans</strong>-Element:
- Schreibe eine CSS-Regel, die auf das <div>-Element mit der Klasse .oceans abzielt.
- Setze display auf flex, um eine 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>