Simples Layout mit Flexbox

Das Thema HTML-Layout ist so alt wie das WWW selbst.

In dieser Lektion verwenden wir zum Layouting Flexbox mit CSS. Allerdings zeige ich dir nur das Notwendigste.

Hinweis: Wie du ein Layout verfeinerst und professionell gestaltest, lernst du mit der Stylingsprache CSS.

Ausrichtung von Elementen: Untereinander vs. Nebeneinander

Die Basis für ein Layout sind HTML-Elemente, die entweder untereinander oder auch nebeneinanderliegen können. Das nebeneinander-Liegen von Elementen ist in HTML leider nicht ganz einfach. Besonders wenn sich der Inhalt der HTML-Blöcke verändert.

Es gibt immer wieder neue Ansätze, wie man es dem Webentwickler einfacher machen kann.

Damals wurde das Layouting über Tabellen oder Iframes gemacht.
Später kamen Layouts über floats hinzu .
Mittlerweile gibt es moderne Mittel ein simples Layouting mit HTML zu erstellen. Allerdings benötigt man für diese Aufgabe immer CSS.

Egal welche Technologie du verwendest gilt die wichtigste Regel von HTML-Elementen, nämlich:

"Ist die Breite, von zwei oder mehreren HTML-Elementen, größer als das übergeordnete Element, werden diese untereinander gezeigt."

Wenn die Breite nicht exakt passt, gibt es unschöne Effekte und Fehler die man stundenlang sucht. Also muss die Breite der HTML-Elemente exakt passen, damit diese im Layout nebeneinander liegen.

Flexbox hilft uns dabei, damit wir keine exakten Pixel mit dem Taschenrechner ausrechnen müssen. Wenn du Flexbox verstehen möchtest, dann schaue dir unseren Kurs CSS-Schnellstart an. (LerneProgrammieren codeLabor-Mitglieder haben automatisch Zugriff auf den CSS-Schnellstart.)

Code-Beispiel: Zwei Div-Elemente nebeneinander

So kannst du zwei div-Elemente nebeneinander legen:

  &lt;div style="display:flex;"&gt;
    &lt;div style="flex:1"&gt;
      &lt;p&gt;Links&lt;/p&gt;
    &lt;/div&gt;
    &lt;div style="flex:1"&gt;
      &lt;p&gt;Rechts&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;

Erklärung des Codes:

Du verwendest ein div-Element, welches über das style-Attribut als Flexbox gezeigt werden soll.
Diese div-Elemente werden durch den Wert im style-Attribut, als gleichgroße Spalten definiert.

Es reicht, wenn du den o.g. HTML-Code verstanden hast. Dann kannst du ihn für deine Zwecke weiterverwenden und erweitern.

Simples Layout mit Flexbox

Ausrichtung von Elementen: Untereinander vs. Nebeneinander

Code-Beispiel: Zwei Div-Elemente nebeneinander

HTML Schnellstart Modul 3