CSS Flexbox: Complete Guide with Examples

What is CSS Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model that makes it easy to design flexible, responsive layouts without using floats or positioning hacks. It works in one dimension at a time — either as a row or a column.

Flex Container Properties

display: flex

To use Flexbox, set display: flex on the parent container:

.container {
  display: flex;
}

This makes all direct children flex items.

flex-direction

Controls the main axis direction:

.container {
  flex-direction: row;        /* Default: left to right */
  flex-direction: row-reverse; /* right to left */
  flex-direction: column;     /* top to bottom */
  flex-direction: column-reverse; /* bottom to top */
}

justify-content

Aligns items along the main axis:

.container {
  justify-content: flex-start;    /* Default */
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between; /* Equal space between */
  justify-content: space-around;  /* Equal space around */
  justify-content: space-evenly;  /* Equal space, including edges */
}

align-items

Aligns items along the cross axis:

.container {
  align-items: stretch;    /* Default */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;
}

flex-wrap

Controls whether items wrap to new lines:

.container {
  flex-wrap: nowrap;   /* Default */
  flex-wrap: wrap;     /* Wrap to new lines */
  flex-wrap: wrap-reverse;
}

gap

Adds space between flex items:

.container {
  gap: 16px;        /* Both row and column gap */
  gap: 16px 8px;    /* row-gap column-gap */
}

Flex Item Properties

flex-grow

How much an item should grow relative to siblings:

.item {
  flex-grow: 1; /* Take equal share of remaining space */
}

flex-shrink

How much an item should shrink when space is limited:

.item {
  flex-shrink: 0; /* Don't shrink */
}

flex-basis

The initial size before growing/shrinking:

.item {
  flex-basis: 200px; /* Start at 200px */
}

flex shorthand

.item {
  flex: 1;         /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  flex: 1 0 auto;  /* flex-grow: 1, flex-shrink: 0, flex-basis: auto */
}

align-self

Override align-items for a single item:

.item {
  align-self: flex-end;
}

Try It: Flexbox Playground

Use our Flexbox Playground to experiment with flex properties visually and see results in real time.

Common Flexbox Patterns

Centering Content

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

Navigation Bar

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Card Grid

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 300px; /* Grow, shrink, min 300px */
}

Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

Tools for CSS Development

• Flexbox Playground: Experiment with flex properties visually
• CSS Formatter: Format and beautify your CSS code
• CSS Preview: Test CSS in a live playground
• CSS Minifier: Compress CSS for production
• Box Shadow Generator: Create CSS box shadows visually
• Gradient Generator: Build CSS gradients easily

Conclusion

Flexbox is essential for modern CSS layouts. Practice with our Flexbox Playground and format your code with the CSS Formatter.