CSS Academy · Lektion

Flex Grow, Shrink und Basis

Steuern Sie mit der flex-Kurzschreibweise, wie Flex-Elemente wachsen und schrumpfen, und legen Sie ihre Basisgröße fest.

Flex Grow, Shrink und Basis ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Die Kurzschreibweise flex

Die Kurzschreibweise flex für Flex-Elemente legt drei Werte fest: flex-grow, flex-shrink und flex-basis.

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis legt die Ausgangsgröße eines Flex-Elements fest, bevor es vergrößert oder verkleinert wird. In Zeilenrichtung überschreibt die Eigenschaft die Breite. auto verwendet die Breite oder Inhaltsgröße des Elements.

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow bestimmt, wie stark ein Element im Verhältnis zu seinen Geschwisterelementen wächst, wenn zusätzlicher Platz verfügbar ist. Der Wert 0 bedeutet, dass es nicht wächst. Höhere Werte erhalten verhältnismäßig mehr Platz.

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

Beispiel für flex-grow

Wenn ein Container 300 px freien Platz und zwei Elemente mit flex-grow 1 und 2 enthält, erhält das erste 100 px zusätzlichen Platz und das zweite 200 px (Verhältnis 1:2).

flex-shrink

flex-shrink steuert, wie stark ein Element schrumpft, wenn nicht genügend Platz vorhanden ist. Der Standardwert ist 1 (alle Elemente schrumpfen gleich stark). Der Wert 0 verhindert das Schrumpfen.

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

Häufige Werte der Kurzschreibweise flex

Merken Sie sich diese häufigen Muster:

flex: 1 = gleichmäßiges Vergrößern und Verkleinern, Basis 0 %
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (starr)
flex: 0 0 200px = feste Größe von 200 px, kein Vergrößern oder Verkleinern

flex: 1 – Gleichmäßige Verteilung

Wenn Sie für alle untergeordneten Elemente flex: 1 festlegen, wird der verfügbare Platz gleichmäßig aufgeteilt. Die Basis wird zu 0 %, sodass die Elemente bei null beginnen und den Platz proportional aufteilen.

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis im Vergleich zu width

flex-basis hat in Richtung der Hauptachse Vorrang vor width. Wenn Sie beide festlegen, gilt flex-basis (außer wenn flex-basis auf auto gesetzt ist; dann wird die Breite verwendet).

Intrinsische und extrinsische Größenbestimmung

Bei flex-basis: 0 (wie bei flex: 1) beginnt das Element bei 0 und wächst proportional – das ist eine echte proportionale Verteilung. Bei flex-basis: auto beginnen die Elemente mit ihrer natürlichen Inhaltsgröße und wachsen dann.

Das Muster der heiligen Dreifaltigkeit

Ein klassisches Layout mit einer festen Seitenleiste, einem flexiblen Hauptbereich und einer festen Seitenleiste:

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

min-width und max-width mit flex

Verwenden Sie min-width und max-width zusammen mit flex-grow, um Grenzen für das Wachstum festzulegen:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

Kurzer Test

Ein Element hat flex: 0 0 200px. Was bedeutet das?

Zusammenfassung

flex-grow verteilt zusätzlichen Platz proportional. flex-shrink steuert, wie stark Elemente komprimiert werden. flex-basis legt die Ausgangsgröße fest. Die Kurzschreibweise flex: 1 ermöglicht eine gleichmäßige Platzverteilung. Verwenden Sie flex: 0 0 Xpx für Elemente mit fester Größe und flex: 1 für flexible Elemente im selben Container.

Häufig gestellte Fragen

Ist die Lektion „Flex Grow, Shrink und Basis“ kostenlos?

Ja — der vollständige Text von „Flex Grow, Shrink und Basis“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Flex Grow, Shrink und Basis“?

Steuern Sie mit der flex-Kurzschreibweise, wie Flex-Elemente wachsen und schrumpfen, und legen Sie ihre Basisgröße fest. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Flex Grow, Shrink und Basis“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy