Zum Campus
Videokurs

Responsives Webdesign mit CSS Flexbox

Lerne alle Konzepte und Eigenschaften der CSS Flexbox und erstelle variable Layouts für deine Website

LERNZIELE

  • Du lernst grundlegende Konzepte der Flexbox, z.B. den Flex-Container und die Flex-Items
  • Du verstehst den Aufbau eines Flex-Containers mit Haupt- und Querachse
  • Du weißt, wie du vorgehen musst, um schrittweise ein Flexbox-Layout zu erstellen
  • Du lernst den Umgang mit wichtigen Eigenschaften wie flex-direction, justify-content und align-items
  • Du siehst, welche weiteren CSS-Eigenschaften dir im Flexbox-Layout zur Verfügung stehen

INHALT

Bei der Gestaltung mit CSS ist das Flexbox-Layout nicht mehr wegzudenken. Mit Flexbox steht ein umfangreicher und vielseitiger Ansatz zur Verfügung, um mit CSS ein responsives Layout zu erhalten. Flexbox ist ein eigenständiger Teil von CSS, der auf bestimmten Konzepten und einer Reihe von CSS-Eigenschaften basiert. Diese stellt dir Erik Behrends in seinem Kurs schrittweise vor und erläutert sie im Detail.

Der Kurs behandelt ausschließlich das Thema Flexbox in CSS. Daher solltest du dich bereits etwas mit den Grundlagen der Webentwicklung in HTML und CSS auskennen. Ansonsten sind keine weiteren Vorkenntnisse nötig, damit du in diesem Kurs das Flexbox-Layout erlernen und in deinen Projekten einsetzen kannst.

ALLE LEKTIONEN IM ÜBERBLICK

Weitere Eigenschaften des Flex-Containers
  • Kapitelüberblick
  • Umbrüche im Container mit flex-wrap kontrollieren
  • Die kombinierte Eigenschaft flex-flow
  • align-content für den Zeilenabstand in mehrzeiligen Containern
  • Abstände innerhalb des Containers mit gap bestimmen
  • Quiz: Weitere Eigenschaften des Flex-Containers
Inhalte im Flex-Container beeinflussen
  • Intro – Vorschau des Kapitels
  • Individuelle Reihenfolge von Items mit order festlegen
  • Die Querachsen-Anordnung mittels align-self überschreiben
  • Größenzuwachs mit flex-grow ermöglichen
  • flex-shrink lässt einzelne Einträge schrumpfen
  • Ausgangsgröße für Items durch flex-basis angeben
  • Die kombinierte Eigenschaft flex
  • Quiz: Inhalte im Flex-Container beeinflussen
Abschluss
  • Fazit und Kursabschluss
Einleitung
  • Kapitelüberblick
  • Flexible Web-Layouts mit Flexbox gestalten
  • Beispiel-Code herunterladen
  • Entwicklungsumgebung einrichten
Grundlagen des Flexbox-Layouts
  • Kapitelüberblick
  • Der Flex-Container mit seinen Flex-Items
  • Die Achsen im Flex-Container
  • Vorgehen zur Erstellung eines Flexbox-Layouts
  • Überblick der relevanten Flexbox-Eigenschaften
  • Quiz: Grundlagen des Flexbox-Layouts
Der Flex-Container und seine Achsen
  • Kapitelüberblick
  • Das erste Beispiel öffnen und starten
  • Flex-Container mit display:flex aktivieren
  • Ausrichtung der Hauptachse mit flex-direction festlegen
  • justify-content legt die Darstellung an der Hauptachse fest
  • align-items bestimmt die Anordnung entlang der Querachse
  • Bedeutung von stretch und baseline bei align-items
  • Quiz: Der Flex-Container und seine Achsen

SO LERNST DU MIT DIESEM KURS

In den Videokursen der heise academy lernst du IT-Themen anschaulich und verständlich. Du siehst den Experten bei der praktischen Arbeit zu und lässt dir dabei alles genau erklären. Das Wissen ist in kompakte Lerneinheiten unterteilt, sodass du den Kurs Schritt für Schritt durcharbeiten oder gezielt zu Lektionen springen kannst, die dich interessieren. Die persönliche Lernumgebung der heise academy hält viele Funktionen für dich bereit, die dich beim Lernen unterstützen:

  • Flexibler Videoplayer mit vielen Steuerungsmöglichkeiten
  • Wissensquiz zur Lernkontrolle
  • Lernhistorie und Lernfortschritt
  • Lesezeichen und Notizen
  • Volltextsuche in den Videos
  • Übungsmaterial zum Mitmachen
  • Responsive Web-App und Videostreaming für alle Endgeräte

TECHNISCHE VORAUSSETZUNGEN

Für diesen Videokurs wird lediglich ein aktueller Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.

DEIN EXPERTE

Prof. Dr. Erik Behrends
Informatik-Professor und Software Developer | DHBW Lörrach

Erik Behrends unterrichtet an der DHBW Lörrach verschiedene Themen der Programmierung und der App-Entwicklung. Vor seiner Zeit an der Hochschule hat er viele Jahre in IT-Unternehmen als Softwareentwickler gearbeitet. Und auch heute programmiert er noch regelmäßig neben seiner Haupttätigkeit in einigen App-Projekten. Zudem beschäftigt sich Erik Behrends mit der wirksamen Digitalisierung und Weiterentwicklung der Lehre: Online-Inhaltsvermittlung und Offline-Vertiefung.

Responsives Webdesign mit CSS Flexbox

Veröffentlicht am 13.12.2025
ab 49,00 €
im
ESSENTIAL PASS
oder 95,00 € im Einzelkauf
inkl. MwSt. | 79,83 € netto
Preise und Pakete vergleichen

Du hast Fragen zu unseren academy Videokursen? Wir helfen dir gerne weiter.

Fülle ganz einfach und bequem das Kontaktformular aus und wir werden deine Fragen schnellstmöglich beantworten.

Kontaktformular