CSS Flexbox

Was ist die Flexbox?
Die Flexbox (kurz für Flexible Box Layout) ist ein CSS-Modell, das das Positionieren, Ausrichten und Verteilen von HTML-Elementen vereinfacht – besonders dann, wenn sich die Größe der Elemente dynamisch ändern kann (z. B. bei verschiedenen Bildschirmgrößen)

Vorteile der Flexbox

  • Inhalte lassen sich zentrieren – sowohl horizontal als auch vertikal – sehr einfach.
  • Ideal für dynamische Layouts, die sich flexibel anpassen sollen.
  • Du kannst mit wenig Code ein Zeilen- oder Spaltenlayout umsetzen.
  • Kein "float"-Gefrickel mehr nötig wie früher.

Wann verwendet man Flexbox?

  • Wenn du z. B. zwei Spalten nebeneinander setzen willst.
  • Wenn du etwas horizontal oder vertikal zentrieren möchtest.
  • Für Layouts, die sich automatisch an verschiedene Bildschirmgrößen anpassen sollen (z. B. mobil & Desktop).
  • Wenn du Elemente gleichmäßig verteilen willst, auch mit Abständen dazwischen.

Zeilen- vs. Spaltenlayout
Flexbox arbeitet entlang einer Hauptachse (main axis). Du bestimmst in welche Richtung die Elemente fließen sollen: Entwededer im Zeilenlayout: nebeneinander (horizonzal mit flex-direction: row; , oder
im Spaltenlayout: untereinander (vertikal) mit flex-direction: column; (Es könnte ein Gedankenfehler auftauchen, wo bei einer Tabelle eine Spalte doch horinzontal und eine Zeile doch vertikal ist, z.B. bei Excel)

Praxis: Zwei verschiedene 2-Spalten-Layouts mit Flexbox

Im folgenden Beispiel zeige ich dir zwei Container, die jeweils ein 2-Spalten-Layout enthalten. Beide verwenden Flexbox, aber mit unterschiedlicher Verteilung des Platzes. 

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>2-Spalten-Layout mit Flexbox</title>
  <style>
    .container {
      display: flex;
      flex-direction: row; /* Zeilenlayout: Elemente nebeneinander */
    }

    .spalte {
      flex: 1; /* Beide Spalten bekommen gleich viel Platz */
      padding: 20px;
      border: 1px solid #0094ff;
      background-color: #111;
      color: white;
    }

    .spalte:first-child {
      background-color: #222;
    }
	
    .weiterespalte {
      padding: 20px;
      border: 1px solid #0094ff;
      background-color: #111;
      color: black;
    }
	
	.weiterespalte:first-child {
	  flex: 2; /* Diese Spalte bekommt 2/3 Platz */
	  background-color: lightblue;
	}

	.weiterespalte:last-child {
	  flex: 1; /* Diese Spalte bekommt 1/3 Platz */
	  background-color: lightgreen;
	}
	
  </style>
</head>
<body>

  <div class="container">
    <div class="spalte">
      <h2>Linke Spalte</h2>
      <p>Hier steht etwas Text in der linken Spalte.</p>
    </div>
    <div class="spalte">
      <h2>Rechte Spalte</h2>
      <p>Hier steht etwas Text in der rechten Spalte.</p>
    </div>
  </div>
  
   <div class="container">
    <div class="weiterespalte">
      <h2>Linke Spalte</h2>
      <p>Hier steht etwas Text in der linken Spalte.</p>
    </div>
    <div class="weiterespalte">
      <h2>Rechte Spalte</h2>
      <p>Hier steht etwas Text in der rechten Spalte.</p>
    </div>
  </div> 

</body>
</html>
Beispiel bc008