CSS Flexbox Spickzettel: Jede Eigenschaft mit Beispielen erklärt

CSS Flexbox ist das am meisten verwendete Layout-System in der modernen Webentwicklung. Es bietet eine leistungsstarke Moglichkeit, Elemente auszurichten und zu verteilen. Dieses vollstandige CSS Flexbox Cheat Sheet erklart jede Eigenschaft mit Beispielen.

Erstellen Sie Flexbox-Layouts visuell mit unserem Flexbox Generator →

Container-Eigenschaften

Flexbox beginnt mit einem Flex-Container. Setzen Sie display: flex auf ein Elternelement.

display: flex | inline-flex

Definiert einen Flex-Container.

.flex-container {
  display: flex;        /* block-level flex container */
}

.inline-flex-container {
  display: inline-flex;  /* inline-level flex container */
}

flex-direction

Legt die Richtung der Hauptachse fest.

.container {
  /* Main axis: left to right (default) */
  flex-direction: row;

  /* Main axis: right to left */
  flex-direction: row-reverse;

  /* Main axis: top to bottom */
  flex-direction: column;

  /* Main axis: bottom to top */
  flex-direction: column-reverse;
}

justify-content

Steuert die Verteilung entlang der Hauptachse.

.container {
  display: flex;

  /* Pack items to the start (default) */
  justify-content: flex-start;
  /* Result: [1][2][3]              */

  /* Center items */
  justify-content: center;
  /* Result:       [1][2][3]        */

  /* Pack items to the end */
  justify-content: flex-end;
  /* Result:              [1][2][3] */

  /* Equal space between items */
  justify-content: space-between;
  /* Result: [1]     [2]     [3]   */

  /* Equal space around items */
  justify-content: space-around;
  /* Result:  [1]   [2]   [3]     */

  /* Equal space between and around items */
  justify-content: space-evenly;
  /* Result:   [1]   [2]   [3]    */
}

align-items

Steuert die Ausrichtung entlang der Querachse.

.container {
  display: flex;
  height: 200px;

  /* Stretch to fill container (default) */
  align-items: stretch;

  /* Align to the top */
  align-items: flex-start;

  /* Align to the center */
  align-items: center;

  /* Align to the bottom */
  align-items: flex-end;

  /* Align by text baseline */
  align-items: baseline;
}

flex-wrap

Steuert ob Elemente umbrechen konnen.

.container {
  display: flex;

  /* All items on one line (default) — may overflow */
  flex-wrap: nowrap;

  /* Items wrap to next line when needed */
  flex-wrap: wrap;

  /* Items wrap in reverse order */
  flex-wrap: wrap-reverse;
}

/* Shorthand: flex-flow combines direction + wrap */
.container {
  flex-flow: row wrap;         /* same as flex-direction: row + flex-wrap: wrap */
  flex-flow: column nowrap;    /* column direction, no wrapping */
}

align-content

Steuert den Abstand zwischen Zeilen bei Umbruch.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;

  /* Pack lines to the start */
  align-content: flex-start;

  /* Center lines */
  align-content: center;

  /* Pack lines to the end */
  align-content: flex-end;

  /* Equal space between lines */
  align-content: space-between;

  /* Equal space around lines */
  align-content: space-around;

  /* Lines stretch to fill container (default) */
  align-content: stretch;
}

gap, row-gap, column-gap

Steuert den Abstand zwischen Flex-Elementen.

.container {
  display: flex;
  flex-wrap: wrap;

  /* Equal gap in both directions */
  gap: 16px;

  /* Different row and column gaps */
  gap: 20px 12px;         /* row-gap: 20px, column-gap: 12px */

  /* Individual properties */
  row-gap: 20px;
  column-gap: 12px;
}

/* Example: card grid with gap */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card-grid > .card {
  flex: 1 1 300px;  /* grow, shrink, min 300px */
}

Element-Eigenschaften

Diese Eigenschaften werden auf einzelne Flex-Elemente angewendet.

order

Steuert die visuelle Reihenfolge. Standard ist 0.

.item-a { order: 2; }  /* appears third */
.item-b { order: -1; } /* appears first */
.item-c { order: 0; }  /* appears second (default) */

/* Visual result: [B] [C] [A]
   DOM order:     A    B    C
   Sorted order: -1    0    2  */

flex-grow

Definiert das Wachstum eines Elements. Standard ist 0.

/* All items same size — share space equally */
.item { flex-grow: 1; }

/* Item B takes twice the extra space */
.item-a { flex-grow: 1; }
.item-b { flex-grow: 2; }
.item-c { flex-grow: 1; }
/* If 200px extra: A gets 50px, B gets 100px, C gets 50px */

/* Only item B grows to fill remaining space */
.item-a { flex-grow: 0; width: 100px; }
.item-b { flex-grow: 1; }
.item-c { flex-grow: 0; width: 100px; }
/* Result: [100px][    fill    ][100px] */

flex-shrink

Definiert das Schrumpfen eines Elements. Standard ist 1.

/* Default: all items shrink equally */
.item { flex-shrink: 1; }

/* Prevent an item from shrinking */
.sidebar {
  flex-shrink: 0;
  width: 250px;  /* stays at 250px even when container is small */
}

/* Item A shrinks twice as fast */
.item-a { flex-shrink: 2; width: 300px; }
.item-b { flex-shrink: 1; width: 300px; }
/* If 100px must be removed: A loses ~67px, B loses ~33px */

flex-basis

Setzt die anfangliche Grosse vor der Verteilung.

.item {
  /* Use item's content size (default) */
  flex-basis: auto;

  /* Fixed starting size */
  flex-basis: 200px;

  /* Percentage of container */
  flex-basis: 25%;

  /* Use content's intrinsic size */
  flex-basis: content;

  /* Zero basis — ignore content size for space distribution */
  flex-basis: 0;
}

/* flex-basis vs width:
   - flex-basis sets the initial size BEFORE grow/shrink
   - width sets a fixed size
   - flex-basis is relative to the main axis
   - If both are set, flex-basis wins */

flex (Kurzschreibweise)

Kurzschreibweise fur flex-grow, flex-shrink und flex-basis.

/* flex: <grow> <shrink> <basis> */

.item { flex: 0 1 auto; }    /* default: don't grow, can shrink, auto basis */
.item { flex: 1; }           /* same as flex: 1 1 0%  — grow equally */
.item { flex: auto; }        /* same as flex: 1 1 auto — grow based on content */
.item { flex: none; }        /* same as flex: 0 0 auto — fully inflexible */
.item { flex: 2; }           /* same as flex: 2 1 0%  — grows 2x */
.item { flex: 1 0 300px; }   /* grow, don't shrink, start at 300px */

align-self

Uberschreibt align-items des Containers fur ein Element.

.container {
  display: flex;
  align-items: flex-start;  /* all items at top */
  height: 200px;
}

.special-item {
  align-self: center;       /* this item centered vertically */
}

/* Values: auto | flex-start | flex-end | center | baseline | stretch */
.item-a { align-self: flex-start; }  /* top */
.item-b { align-self: center; }      /* middle */
.item-c { align-self: flex-end; }    /* bottom */
.item-d { align-self: stretch; }     /* full height */

Haufige Layout-Muster

Die am haufigsten verwendeten Flexbox-Layoutmuster.

Elemente zentrieren

Flexbox macht Zentrierung einfach.

/* Horizontal centering */
.center-horizontal {
  display: flex;
  justify-content: center;
}

/* Vertical centering */
.center-vertical {
  display: flex;
  align-items: center;
  height: 100vh;
}

/* Perfect centering (both axes) */
.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Alternative: center with margin auto */
.center-auto {
  display: flex;
  height: 100vh;
}
.center-auto > .child {
  margin: auto;  /* centers in both axes */
}

Navigationsleiste

Klassische responsive Navbar.

/* Basic navbar: logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar .logo {
  flex-shrink: 0;
}

.navbar .nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

/* Navbar with center section */
.navbar-3 {
  display: flex;
  align-items: center;
  padding: 0 24px;
}
.navbar-3 .left   { flex: 1; }
.navbar-3 .center { flex: 0; white-space: nowrap; }
.navbar-3 .right  { flex: 1; display: flex; justify-content: flex-end; }

Karten-Raster

Responsives Karten-Layout mit Umbruch.

/* Responsive card grid */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px;   /* grow, shrink, min 300px */
  max-width: 400px;
}

/* Cards with equal height */
.card-grid-equal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card-equal {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.card-equal .card-body {
  flex: 1;           /* body fills remaining height */
}

.card-equal .card-footer {
  margin-top: auto;  /* footer pushed to bottom */
}

Fester Footer

Footer bleibt unten auch bei wenig Inhalt.

/* Sticky footer layout */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header {
  flex-shrink: 0;  /* fixed height header */
}

main {
  flex: 1;         /* takes all remaining space */
}

footer {
  flex-shrink: 0;  /* fixed height footer */
}

/* HTML structure:
   <body>
     <header>...</header>
     <main>...</main>
     <footer>...</footer>
   </body>
*/

Holy Grail Layout

Klassisches Drei-Spalten-Layout.

/* Holy grail layout */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page > header,
.page > footer {
  flex-shrink: 0;
}

.page > .content {
  flex: 1;
  display: flex;
}

.page .sidebar-left {
  flex: 0 0 200px;   /* fixed 200px left sidebar */
  order: -1;         /* appears first visually */
}

.page .main {
  flex: 1;           /* main content fills remaining space */
  min-width: 0;      /* prevent overflow */
}

.page .sidebar-right {
  flex: 0 0 200px;   /* fixed 200px right sidebar */
}

/* HTML structure:
   <div class="page">
     <header>Header</header>
     <div class="content">
       <main class="main">Main Content</main>
       <aside class="sidebar-left">Left</aside>
       <aside class="sidebar-right">Right</aside>
     </div>
     <footer>Footer</footer>
   </div>
*/

Flexbox vs Grid: Wann welches nutzen

Beide losen unterschiedliche Probleme.

Flexbox eignet sich fur:

• One-dimensional layouts (a single row or column)
• Content-driven sizing (items determine their own width)
• Dynamic, unknown number of items
• Navigation bars and toolbars
• Centering elements
• Components where items should wrap naturally

CSS Grid eignet sich fur:

• Two-dimensional layouts (rows and columns together)
• Layout-driven sizing (the layout dictates item sizes)
• Complex page layouts with header, sidebar, content, footer
• Overlapping elements in a grid
• When you need precise control over both axes simultaneously
• Dashboard-style layouts with varying card sizes

/* Combining Flexbox and Grid */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Use Flexbox inside grid areas */
.page header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page main {
  grid-area: main;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-content: flex-start;
}

Browser-Unterstutzung

Flexbox hat hervorragende Browser-Unterstutzung.

Flexbox has over 99% global browser support. The only consideration is the gap property in flex contexts, which requires slightly newer browsers. For older browser support, use margins as a fallback:

/* Fallback for gap */
.container {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;       /* negative margin to offset item margins */
}
.container > .item {
  margin: 8px;        /* acts like gap: 16px */
}

/* Modern approach with @supports */
@supports (gap: 16px) {
  .container {
    gap: 16px;
    margin: 0;
  }
  .container > .item {
    margin: 0;
  }
}

Haufig gestellte Fragen

Was ist der Unterschied zwischen justify-content und align-items?

justify-content steuert die Hauptachse, align-items die Querachse. Bei flex-direction: column tauschen die Achsen.

Wann Flexbox statt Grid?

Flexbox fur 1D-Layouts, Grid fur 2D-Layouts. Kombinieren Sie beide.

Wie macht man Flex-Elemente gleich breit?

Setzen Sie flex: 1 und min-width: 0 auf alle Elemente.

Warum schrumpft mein Flex-Element nicht?

Standard min-width: auto verhindert das Schrumpfen. Setzen Sie min-width: 0.

Kann man gap mit Flexbox nutzen?

Ja, gap funktioniert mit Flexbox in allen modernen Browsern.

CSS Flexbox ist unverzichtbar fur moderne Layouts. Uben Sie mit unserem Tool.

Testen Sie unseren interaktiven Flexbox Generator →