Flexboxen

Einfache Flexboxen
Flexboxen im schmalen Fenster.
Flexboxen im schmalen Fenster.
Flexboxen im breiten Fenster.
Flexboxen im breiten Fenster.
Gegeben sind eine HTML-Datei und eine CSS-Datei (Download: hier). Definieren Sie in der CSS-Datei geeignete Flexboxen, so dass die HTML-Seite sich wie in den Abbildungen dargestellt verhält.
Hinweise:
  1. Definieren Sie den Body-Bereich der Seite als eine Flexbox.
  2. Die Klassen "media" und "media-reverse" sind ebenfalls Flexboxen. Sie haben die Ausrichtung "flex-start". Zudem ordnen sie ihre Inhalte in einer Zeile. "media-reverse" ordnet ihre Inhalte allerdings in einer umgekehrten Reihenfolge.
  3. Auch die Klasse "media-body" ist eine Flexbox. Inhalte dieser Flexbox werden in einer Spalte angeordnet.
  4. Definieren Sie bei Bedarf auch geeignete Breiten und Höhen einzelner Boxen.
Kontrolle der eigenen Lösung
Überprüfen Sie hier Ihre Lösung. Sie sind mit diesem Teilschritt erst fertig, wenn die Tests keine Fehler zeigen.
Verschachtelte Flexboxen
Verschachtelte Flexboxen im schmalen Fenster.
Verschachtelte Flexboxen im schmalen Fenster.
Verschachtelte Flexboxen im breiten Fenster.
Verschachtelte Flexboxen im breiten Fenster.
Gegeben sind eine HTML-Datei und eine CSS-Datei (Download: hier). Definieren Sie in der CSS-Datei geeignete Flexboxen, so dass die HTML-Seite sich wie in den Abbildungen dargestellt verhält.
Hinweise:
  1. Definieren Sie die Klasse "media-nested" der Seite als eine Flexbox.
  2. Die Klassen "media" und "media-reverse" sind ebenfalls Flexboxen. Sie haben die Ausrichtung "flex-start". Zudem ordnen sie ihre Inhalte in einer Zeile. "media-reverse" ordnet ihre Inhalte allerdings in einer umgekehrten Reihenfolge.
  3. Auch die Klasse "media-body" ist eine Flexbox. Inhalte dieser Flexbox werden in einer Spalte angeordnet.
  4. Definieren Sie bei Bedarf auch geeignete Breiten und Höhen einzelner Boxen. Benutzen Sie ggf. zusätzliche Media-Queries.
Kontrolle der eigenen Lösung
Überprüfen Sie hier Ihre Lösung. Sie sind mit diesem Teilschritt erst fertig, wenn die Tests keine Fehler zeigen.