Erste Schritte im Flexbox Modell mit display: flex
Erste Schritte im Flexbox Modell mit display: flex

Erste Schritte im Flexbox Modell mit display: flex

Tutorial

In den kommenden Tagen werde ich eine ganze Artikelserie zum Thema Flexbox veröffentlichen. Schritt für Schritt werde ich an dieses komplexe Thema herangehen und alle Aspekte davon in praktischen Beispielen aufzeigen. Da die Artikel aufeinander aufbauen werden sie in der Kategorie „Tutorial“ veröffentlicht.

Ein umfangreiches Glossar zum Thema findest Du in der Webdokumentation von Mozilla.

display: flex; ist ein guter Ansatz um sich an das Flexbox Modell heran zu tasten. Der Parent-Container bekommt mit Hilfe der id „parent“ die Deklaration display: flex; damit sich die Child-Container dem fügen.

Im HTML-Markup wären die Child Container in unserem Beispiel untereinander angeordnet. Durch display: flex; werden alle Child-Container in Spalten nebeneinander positioniert. Die Breite der Child-Container richtet sich hier nach dem Text im Innern sofern sie nicht festgelegt wird.

In HTML erstellen wir einen Parent-Container mit der id parent“. Innerhalb dieses platzieren wir 4 Child-Container mit der id „child“ und verschiedenen Klassen für die einzelnen Farben.

<body>
  <div id="parent">
    <div id="child" class="red“>Header</div>
    <div id="child" class="green“>Nav</div>
    <div id="child" class="blue“>Main</div>
    <div id="child" class="yellow“>Footer</div>
  </div>
</body>

Was das Styling betrifft habe ich Schwarz als Hintergrundfarbe festelegt. Der Parent-Container hat die Hintergrundfarbe Weiss und die Child-Container jeweils die Hintergrundfarbe der festgelegten Klassen.

Alle modernen Browser unterstützen nebenbei bemerkt 140 Bezeichnungen für Farben in CSS die es also nicht erfordern den Farbton per RGB oder Hexcode eingeben zu müssen. Auf der Website von W3Schools findest Du eine Auflistung der Farbnamen.

body {
  background-color: black;
}

#parent {
  width: 50%;
  background-color: white;
  display: flex;
}

#child {
  width: 20%;
}

.red {
  background: red;
  color: white;
}

.green {
  background: green;
  color: white;
}

.blue {
  background: blue;
  color: white;
}

.yellow {
  background: yellow;
  color: black;
}

Die Schriftfarben habe ich als schwarz oder weiss, je nach Hintergrundfarbe definiert. Die Child-Container nehmen insgesamt nur 80% der Breite des Parent-Containers, da ich alle Child-Container auf 20% Breite festgelegt habe. Das Ergebnis im Browser sieht dan folgendermassen aus.

Im nächsten Beitrag der Serie Flexbox werde ich auf die Eigenschaften flex-row, flex-shrink sowie flex-basis eingehen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.