Flexbox Children 100 % Height Parent Elements

Wie man Flexbox Children auf 100 % Höhe des Parent-Elements festlegt

Ole Mai
Inhaltsverzeichnis
Dauer: 1 Min.
Anleitung
Niveau: 1/5

Flexbox ist ein mächtiges CSS Layout-Tool, das es einfach macht, Elemente innerhalb eines Containers auszurichten und Platz zu verteilen. Um die Kinder-Elemente (Flexbox-Children) auf 100% der Höhe des Elternelements (Parent-Element) zu setzen, befolgen Sie die folgenden Schritte.

Höhe des Parent-Elements

Stellen Sie sicher, dass das Parent-Element eine Höhe besitzt:

<div class="parent">
  <div class="child">Child</div>
</div>
.parent {
  display: flex;
  height: 500px; /* oder height: 100% */
}

Höhe der Child-Elemente

Setzen Sie die Höhes der Flexbox-Children auf 100 %, um das Parent-Element vollständig vertikal auszufüllen.

.child {
  height: 100%;
  align-items: center;
}

Code-Beispiel

Der vollständige HTML- und CSS-Code sieht dann folgendermaßen aus:

<html>
  <head>
    <style>
      .parent {
        display: flex;
        height: 500px; /* oder height: 100% */
      }
      .child {
        height: 100%;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">Child</div>
    </div>
  </body>
</html>

Dies ist eine einfache Methode, um Flexbox-Children auf 100 % der Höhe des Parent-Elements festzulegen. Verwenden Sie diese Technik, um Ihre Layouts ansprechender und einfacher zu gestalten.

Picture of Ole Mai
Ole Mai
Ole beschäftigt sich mit der Prozessoptimierung bei Gegenfeld und fokussiert sich auf die Themen Marketing und Webentwicklung.

News per E-Mail

Hochwertige Lerninhalte
Ratgeber und Kurse – direkt ins Postfach.
Gegenfeld Newsletter

Keine Beratungsleistung

Die Inhalte auf dieser Website stellen keine Finanz-, Steuer- oder Rechtsberatung dar und ersetzen diese auch nicht.

Bitte wenden Sie sich bei Fragen an einen entsprechenden Finanz- oder Steuerberater oder Fachanwalt.