Cheat Sheet CSS Flexbox: Ogni proprietà spiegata con esempi

CSS Flexbox is the most widely used layout system in modern web development. It provides a powerful, efficient way to align, distribute, and reorder elements within a container — even when their sizes are unknown or dynamic. This complete CSS Flexbox cheat sheet explains every property with practical code examples so you can master flexible layouts.

Build flexbox layouts visually with our Flexbox Generator →

Container Properties

Flexbox starts with a flex container. Set display: flex on a parent element and its direct children become flex items.

display: flex | inline-flex

This defines a flex container. flex creates a block-level flex container; inline-flex creates an inline-level one.

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

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

flex-direction

Establishes the main axis direction. This determines how flex items are laid out in the container.

.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

Controls how items are distributed along the main axis (horizontal by default).

.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

Controls how items are aligned along the cross axis (vertical by default).

.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

Controls whether items are forced into a single line or can wrap to multiple lines.

.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

Controls spacing between lines when items wrap to multiple lines. Has no effect on single-line flex containers.

.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

Controls the spacing between flex items. Unlike margins, gaps only apply between items, not on the outer edges.

.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 */
}

Item Properties

These properties are set on individual flex items (children of the flex container) to control their sizing and positioning.

order

Controls the visual order of items. Items with lower values appear first. Default is 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

Defines how much an item should grow relative to siblings when extra space is available. Default is 0 (do not grow).

/* 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

Defines how much an item should shrink relative to siblings when space is insufficient. Default is 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

Sets the initial main size of an item before space distribution. It can be a length, percentage, or auto.

.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 (shorthand)

Shorthand for flex-grow, flex-shrink, and flex-basis. The recommended way to set flex item sizing.

/* 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

Overrides the container's align-items value for a specific item.

.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 */

Common Layout Patterns

Here are the most frequently used flexbox layout patterns you'll encounter in real projects.

Centering Elements

Flexbox makes centering trivial — no more margin hacks or absolute positioning.

/* 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 */
}

Navigation Bar

A classic responsive navbar with logo on the left and links on the right.

/* 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; }

Card Grid

A responsive card layout that wraps and distributes evenly.

/* 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 */
}

Sticky Footer

Footer stays at the bottom of the viewport even when content is short.

/* 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

The classic three-column layout with header and footer.

/* 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: When to Use Each

Both Flexbox and CSS Grid are powerful layout tools, but they solve different problems.

Flexbox is best for:

• 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 is best for:

• 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 Support

Flexbox has excellent browser support across all modern browsers.

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;
  }
}

Frequently Asked Questions

What is the difference between justify-content and align-items?

justify-content controls distribution along the main axis (horizontal by default with flex-direction: row), while align-items controls alignment along the cross axis (vertical by default). If you change flex-direction to column, these axes swap: justify-content becomes vertical and align-items becomes horizontal.

When should I use Flexbox instead of CSS Grid?

Use Flexbox for one-dimensional layouts (either a row OR a column), content-driven sizing, and dynamic layouts where items determine their own size. Use CSS Grid for two-dimensional layouts (rows AND columns simultaneously), layout-driven sizing, and when you need precise control over both axes at once. They can also be combined: Grid for page layout, Flexbox for component internals.

How do I make flex items equal width?

Set flex: 1 on all items. This is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%, which makes all items grow equally from a zero base. If items still have different widths, also set min-width: 0 to allow them to shrink below their content size.

Why is my flex item not shrinking?

Flex items have min-width: auto by default, which prevents them from shrinking below their minimum content size. To fix this, set min-width: 0 (or min-height: 0 for column layouts) on the item. Also check if flex-shrink is set to 0 or if the item has a fixed width that prevents shrinking.

Can I use gap with Flexbox?

Yes, the gap property works with Flexbox in all modern browsers (Chrome 84+, Firefox 63+, Safari 14.1+, Edge 84+). It is the recommended way to add spacing between flex items because, unlike margins, gap only creates space between items and not on the outer edges. You can use gap for both axes, or row-gap and column-gap individually.

CSS Flexbox is an essential tool for modern web layouts. With these properties and patterns, you can build any UI layout efficiently. Practice with our interactive tool to reinforce your understanding.

Try our interactive Flexbox Generator to build layouts visually →