Flexbox und Grid Layout

Flexbox (Flexible Box Layout) und CSS Grid Layout sind zwei moderne CSS-Layout-Systeme, die entwickelt wurden, um komplexe, responsive Webseiten effizienter zu gestalten. Beide ergänzen sich, haben aber unterschiedliche Stärken und Anwendungsbereiche.

Flexbox (Flexible Box Layout)

Was ist Flexbox?

Flexbox ist ein eindimensionales Layout-Modell, das Elemente innerhalb eines Containers entlang einer Achse (horizontal oder vertikal) anordnet. Es ermöglicht eine dynamische Anpassung der Größe und Position von Elementen, um den verfügbaren Platz optimal zu nutzen.

Flexbox – Wichtige Eigenschaften:

Container-Eigenschaften:
• display: flex – Aktiviert Flexbox.
• flex-direction – Legt die Hauptachse fest (row, column, row-reverse, column-reverse).
• justify-content – Steuert die Ausrichtung entlang der Hauptachse (flex-start, center, space-between, space-around).
• align-items – Steuert die Ausrichtung entlang der Querachse (stretch, center, flex-start, flex-end).
• flex-wrap – Bestimmt, ob Elemente in eine neue Zeile/Spalte umbrechen (wrap, nowrap).

Item-Eigenschaften:
• flex-grow – Definiert, wie viel ein Element wachsen darf.
• flex-shrink – Bestimmt, wie stark ein Element schrumpfen kann.
• flex-basis – Legt die Ausgangsgröße eines Elements fest.
• align-self – Überschreibt align-items für ein einzelnes Element.

Beispiel: Horizontale Navigation:

<div class="nav-container">
  <div class="nav-item">Home</div>
  <div class="nav-item">About</div>
  <div class="nav-item">Services</div>
  <div class="nav-item">Contact</div>
</div>

<div class="nav-container">
  <div class="nav-item">Home</div>
  <div class="nav-item">About</div>
  <div class="nav-item">Services</div>
  <div class="nav-item">Contact</div>
</div>

.nav-container {
  display: flex;
  justify-content: space-between; /* Gleichmäßige Verteilung */
  align-items: center; /* Zentriert vertikal */
  background: #333;
  padding: 10px;
}

.nav-item {
  color: white;
  padding: 8px 16px;
}

.nav-container {
  display: flex;
  justify-content: space-between; /* Gleichmäßige Verteilung */
  align-items: center; /* Zentriert vertikal */
  background: #333;
  padding: 10px;
}

.nav-item {
  color: white;
  padding: 8px 16px;
}

Ergebnis:
Die Navigationselemente sind gleichmäßig verteilt und vertikal zentriert.

CSS Grid Layout

Was ist CSS Grid?

CSS Grid ist ein zweidimensionales Layout-System, das es ermöglicht, Elemente in Zeilen und Spalten anzuordnen. Es ist besonders nützlich für komplexe Designs wie Dashboards, Kartenlayouts oder Magazine.

Wichtige Eigenschaften:

Container-Eigenschaften:
• display: grid – Aktiviert Grid.
• grid-template-columns / grid-template-rows – Definiert Spalten- und Zeilengrößen (z. B. 1fr 2fr 1fr).
• gap – Abstand zwischen Grid-Zellen (row-gap, column-gap).
• grid-template-areas – Benannte Bereiche für Layouts.
• justify-items / align-items – Ausrichtung innerhalb der Zellen.

Item-Eigenschaften:
• grid-column / grid-row – Positionierung über Spalten/Zeilen (span 2).
• grid-area – Zuweisung zu einem benannten Bereich.
• justify-self / align-self – Individuelle Ausrichtung.

Beispiel: Blog-Layout mit Grid:

<div class="grid-container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

<div class="grid-container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 2 Spalten */
  grid-template-rows: auto 1fr auto; /* 3 Zeilen */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
  height: 100vh;
}

header { grid-area: header; background: lightblue; }
aside { grid-area: sidebar; background: lightgreen; }
main { grid-area: main; background: lightyellow; }
footer { grid-area: footer; background: lightcoral; }

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 2 Spalten */
  grid-template-rows: auto 1fr auto; /* 3 Zeilen */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
  height: 100vh;
}

header { grid-area: header; background: lightblue; }
aside { grid-area: sidebar; background: lightgreen; }
main { grid-area: main; background: lightyellow; }
footer { grid-area: footer; background: lightcoral; }

Ergebnis:
Ein strukturiertes Layout mit Header, Sidebar, Hauptinhalt und Footer.

Vergleich: Flexbox vs. Grid

Für ein modernes responsive Webdesign

• Flexbox ist ideal für eindimensionale Anordnungen (entweder Zeile oder Spalte).
• Grid eignet sich für zweidimensionale Strukturen (Tabellen, komplexe Seitenlayouts).
• Beide können kombiniert werden, z. B. ein Grid-Container mit Flexbox-Inhalten.

Durch die richtige Wahl zwischen Flexbox und Grid lassen sich moderne, responsive Webdesigns effizient umsetzen.