12. Unterrichtsblock

CSS Logo

Inhaltsverzeichnis

Flexbox

Vor dem Flexbox-Layoutmodul gab es vier Layoutmodi:

  • block für Abschnitte auf einer Webseite
  • inline, für Text
  • table, für zweidimensionale Tabellendaten
  • position, für die explizite Position eines Elements

Das Flexible-Box-Layout-Modul erleichtert das Entwerfen einer flexiblen, responsiven Layoutstruktur ohne Verwendung von Float oder Positionierung.

Achsen-von-Flexbox

Flexbox-Elemente

Um mit der Verwendung des Flexbox-Modells zu beginnen, müssen wir zunächst einen Flex-Container definieren:

.flex-container {
  display: flex;
  background-color: pink;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
<div class="flex-container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div> 
  <div>E</div> 
</div>
A
B
C
D
E

Ein Flexbox-Layout benötigt ein Eltern-Element mit der display Eigenschaft und dem Wert flex.
Direkte Kind-Elemente des flexiblen Eltern-Elements werden dadurch automatisch auch flexibel

Das obige Element repräsentiert einen Flex-Container (der rötliche Bereich) mit fünf Flex-Elementen.

Browser-Unterstützung

Data on support for the flexbox feature across the major browsers from caniuse.com

Aufgabe

Probiere display: flex; im Code Editor aus

Aufgaben

Erfülle alle Aufgaben der Reihe nach: https://flexboxfroggy.com/

Aufgabe 1: Einfaches Kartenlayout

Ziel: Erstelle ein responsives Layout für Produktkarten.

  • Anweisungen:
    1. Erstelle einen Flex-Container, der mehrere Karten enthält.
    2. Jede Karte sollte ein Bild, eine Überschrift, eine kurze Beschreibung und einen Button enthalten.
    3. Die Karten sollten nebeneinander angezeigt werden, wenn genug Platz vorhanden ist, und untereinander, wenn der Bildschirm zu schmal wird.

Aufgabe 2: Navigation Menü

Ziel: Erstelle ein horizontales Navigationsmenü mit Flexbox.

  • Anweisungen:
    1. Erstelle eine Navigationsleiste, die mehrere Links enthält.
    2. Verwende Flexbox, um die Links gleichmäßig im verfügbaren Raum zu verteilen.
    3. Stelle sicher, dass die Links zentriert sind und bei Hover einen stilistischen Effekt zeigen.

Aufgabe 3: Fußzeilenlayout

Ziel: Gestalte eine responsive Fußzeile mit sozialen Medien Icons, Kontaktinformationen und einem Newsletter-Anmeldeformular.

  • Anweisungen:
    1. Erstelle einen Flex-Container für die Fußzeile.
    2. Verteile die Inhalte (soziale Medien Icons, Kontaktinformationen, Formular) gleichmäßig über die Fußzeile.
    3. Sorge dafür, dass die Inhalte bei kleineren Bildschirmen untereinander angeordnet werden.

Aufgabe 4: Galerie-Ansicht

Ziel: Entwickle eine Bildergalerie mit Flexbox.

  • Anweisungen:
    1. Erstelle einen Flex-Container, der mehrere Bilder enthält.
    2. Die Bilder sollten in Reihen angeordnet sein und sich automatisch an die Breite des Bildschirms anpassen.
    3. Sorge dafür, dass zwischen den Bildern immer ein kleiner Abstand bleibt.

Aufgabe 5: Dashboard-Layout

Ziel: Erstelle ein einfaches Dashboard für eine Anwendung mit Flexbox.

  • Anweisungen:
    1. Das Dashboard sollte Bereiche für eine Seitenleiste, einen Hauptinhalt und eine obere Leiste enthalten.
    2. Verwende Flexbox, um die Layoutstruktur zu definieren: die Seitenleiste sollte links angeordnet sein, der Hauptinhalt in der Mitte und die obere Leiste oben.
    3. Stelle sicher, dass das Layout responsiv ist und sich an unterschiedliche Bildschirmgrößen anpasst.

Aufgabe 6: Bildergalerie

Baue eine Bild-Gallerie mit 15 Bildern und ordne diese mit der Flexbox an.

  • Die Bilder sollen bei kleineren Bildschirmen in die nächste Zeile hüpfen
  • Bei einer Bildschirmgröße von unter 500px sollen alle Bilder untereinander dargestellt werden

Übergeordnetes Element (Container)

Dies ist ein Flex- Container (der grüne Bereich) mit drei Flex- Elementen:

1

2

3

Der Flex-Container wird flexibel, indem die display-Eigenschaft auf flex gesetzt wird:

.flex-container {
  display: flex;
}

Wenn nur die Eigenschaft display:flex; verwendet wird, kommen die Standardwerte für align-items, justify-content und flex-direction zum tragen.

  • Der Standardwert für flex-direction ist row – von links nach rechts
  • Der Standardwert für justify-content ist flex-start: Die Items stehen  am Anfang der Hauptachse, was normalerweise einer Positionierung links entspricht.
  • Der Standardwert für align-items ist stretch: Alle Items sind daher standardmäßig so hoch wie der Flex-Container.

Die Eigenschaften des CSS-Flexbox-Containers

Die folgende Tabelle listet alle CSS-Flexbox-Container-Eigenschaften auf:

EigenschaftBeschreibung
align-contentÄndert das Verhalten der Flex-Wrap-Eigenschaft. Es ist ähnlich wie align-items, aber anstatt Flex-Items auszurichten, richtet es Flex-Linien aus
align-itemsRichtet die flexiblen Elemente vertikal (auf der Kreuz-Achse) aus, wenn die Elemente nicht den gesamten verfügbaren Platz auf der Haupt-Achse verwenden
displayGibt den Typ der Box an, der für ein HTML-Element verwendet wird
flex-directionGibt die Richtung der flexiblen Elemente in einem Flex-Container an
flex-flowEine abgekürzte Eigenschaft für flex-direction und flex-wrap
flex-wrapGibt an, ob die Flex-Elemente umbrechen bzw. nicht umbrechen sollen, wenn auf einer Flex-Linie nicht genügend Platz vorhanden ist
justify-contentRichtet die flexiblen Elemente horizontal aus, wenn die Elemente nicht den gesamten verfügbaren Platz auf der Hauptachse verwenden

Die Flex-Direction-Eigenschaft

Die flex-direction-Eigenschaft definiert, in welche Richtung der Container die Flex-Items stapeln wird.

1

2

3

Der column Wert stapelt die Flex-Elemente vertikal (von oben nach unten):

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

Der column-reverse Wert stapelt die Flex-Elemente vertikal (aber von unten nach oben):

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

Der row-Wert stapelt die Flex-Items horizontal (von links nach rechts):

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

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der row-reverse Wert stapelt die Flex-Elemente horizontal (aber von rechts nach links):

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

Aufgabe

Aufgabe 1: Horizontales vs. Vertikales Layout

Ziel: Wechsle zwischen horizontalem und vertikalem Layout.

  • Anweisungen:
    1. Erstelle einen Flex-Container mit mindestens vier Kind-Elementen.
    2. Setze zunächst die flex-direction auf row.
    3. Ändere die flex-direction auf column, und beobachte die Änderung im Layout.
    4. Füge eine Schaltfläche hinzu, die beim Klicken zwischen diesen beiden Layouts wechselt.

Aufgabe 2: Reihenfolge umkehren

Ziel: Kehre die Reihenfolge der Flex-Items um.

  • Anweisungen:
    1. Erstelle einen Flex-Container mit mehreren Kind-Elementen.
    2. Verwende flex-direction: row-reverse oder column-reverse, um die Anordnung der Elemente umzukehren.
    3. Vergleiche, wie sich die Darstellung der Elemente zwischen row, row-reverse, column und column-reverse unterscheidet.

Aufgabe 3: Responsive Kartenanordnung

Ziel: Erstelle ein responsives Kartenlayout, das seine Orientierung basierend auf der Bildschirmbreite ändert.

  • Anweisungen:
    1. Erstelle mehrere „Karten“ (Divs mit Inhalt wie Bildern und Text).
    2. Setze die flex-direction standardmäßig auf row.
    3. Verwende Media-Queries, um die flex-direction auf column zu ändern, wenn die Bildschirmbreite unter einen bestimmten Wert fällt.

Aufgabe 4: Navigation mit Flexbox

Ziel: Gestalte eine Navigation, die ihre Orientierung ändert.

  • Anweisungen:
    1. Erstelle eine Navigationsleiste mit mehreren Links.
    2. Setze die flex-direction auf row.
    3. Füge eine Schaltfläche hinzu, die bei Klick die flex-direction auf column ändert, um die Links vertikal anzuordnen.

Aufgabe 5: Info-Panel Layout

Ziel: Erstelle ein Info-Panel, das Inhalte in unterschiedlichen Orientierungen zeigt.

  • Anweisungen:
    1. Erstelle einen Container, der zwei Hauptbereiche enthält: einen Titelbereich und einen Inhaltbereich.
    2. Verwende flex-direction: row für eine horizontale Anordnung der Bereiche.
    3. Füge eine Option hinzu, um die flex-direction auf column zu ändern, sodass der Titel über dem Inhalt erscheint.

Die Flex-Wrap-Eigenschaft

Die flex-wrap Eigenschaft gibt an, ob die Flex-Elemente umbrechen sollen oder nicht.

Die folgenden Beispiele haben 12 Flex-Elemente, um die flex-wrap-Eigenschaft besser zu demonstrieren.

1

2

3

4

5

6

7

8

9

10

11

12

Der wrap Wert gibt an, dass die Flex-Elemente bei Bedarf umbrochen werden:

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

Aufgabe

Baue den Code im Code Editor mit 15 einzelnen Elementen nach.

Der nowrap-Wert gibt an, dass die Flex-Elemente nicht umbrochen werden (dies ist die Standardeinstellung):

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

Aufgabe

Baue den Code im Code Editor mit 15 einzelnen Elementen nach.

Der wrap-reverse Wert gibt an, dass die flexiblen Elemente bei Bedarf in umgekehrter Reihenfolge umwickelt werden:

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

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Die Flex-Flow-Eigenschaft

Die flex-flow-Eigenschaft ist eine abgekürzte Eigenschaft zum Festlegen der Eigenschaften flex-direction und flex-wrap.

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

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Die justify-content-Eigenschaft

Die justify-content Eigenschaft wird verwendet, um die Flex-Elemente auszurichten:

1

2

3

Der center-Wert richtet die Flex-Elemente in der Mitte des Containers aus:

.flex-container {
  display: flex;
  justify-content: center;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der flex-start-Wert richtet die Flex-Elemente am Anfang des Containers aus (dies ist die Standardeinstellung):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der flex-end-Wert richtet die Flex-Elemente am Ende des Containers aus:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der space-around-Wert zeigt die Flex-Elemente mit Leerzeichen vor, zwischen und nach den Zeilen an:

.flex-container {
  display: flex;
  justify-content: space-around;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der space-between-Wert zeigt die Flex-Elemente mit Leerzeichen zwischen den Zeilen an:

.flex-container {
  display: flex;
  justify-content: space-between;
}

Die Eigenschaft align-items

Die align-items-Eigenschaft wird verwendet, um die Flex-Elemente auszurichten. In diesen Beispielen verwenden wir einen 200 Pixel hohen Container, um die align-items-Eigenschaft besser zu demonstrieren.

1

2

3

Der center-Wert richtet die Flex-Items in der Mitte des Containers aus:

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

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der flex-start-Wert richtet die Flex-Elemente oben im Container aus:

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

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der flex-end-Wert richtet die Flex-Elemente am unteren Rand des Containers aus:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der stretch-Wert dehnt die Flex-Elemente aus, um den Container zu füllen (dies ist die Standardeinstellung):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der baseline-Wert richtet die Flex-Elemente wie ihre Grundlinien aus:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Hinweis: Das Beispiel verwendet eine andere Schriftgröße, um zu demonstrieren, dass die Elemente an der Textgrundlinie ausgerichtet werden:

1

2

3

4

Die align-content-Eigenschaft

Die align-content Eigenschaft wird verwendet, um die Flexlinien auszurichten.

1

2

3

4

5

6

7

8

9

10

11

12

In diesen Beispielen verwenden wir einen 600 Pixel hohen Container, dessen flex-wrapEigenschaft auf gesetzt ist , um die Eigenschaft wrapbesser zu demonstrieren .align-content

Der space-between-Wert zeigt die Flexlinien mit gleichem Abstand zwischen ihnen an:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der space-around-Wert zeigt die Flex-Linien mit Leerzeichen davor, dazwischen und danach an:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der stretch-Wert streckt die Flexlinien, um den verbleibenden Platz einzunehmen (dies ist die Standardeinstellung):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Die center-Wertanzeigen zeigen die Flexlinien in der Mitte des Containers an:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der flex-start-Wert zeigt die Flexlinien am Anfang des Containers an:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Der flex-end-Wert zeigt die Flexlinien am Ende des Containers an: 

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

Aufgabe

Baue den Code im Code Editor mit 4 einzelnen Elementen nach.

Perfekte Zentrierung

Im folgenden Beispiel lösen wir ein sehr häufiges Stilproblem: perfekte Zentrierung.

LÖSUNG: Setzen Sie sowohl die Eigenschaften justify-contentals auch align-items auf center, und das Flex-Element wird perfekt zentriert:

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}