CSS Flexbox Guide: Properties and Layout Examples

What Flexbox is and when to use it

Flexbox is a CSS layout mode that arranges elements in one line: a row or a column. It's a good fit for navigation, rows of buttons, centering and equal-height cards.

You turn it on with one property on the parent:

.container {
  display: flex;
}

The parent becomes a flex container, and its direct children become flex items. Flexbox has two axes: the main axis (where items flow) and the cross axis (perpendicular to it).

Container properties

Note: with flex-direction: column the axes swap, so justify-content starts working vertically.

Item properties

The most useful shorthands:

• flex: 1 — the item grows and shares space equally with siblings;
• flex: none — it neither grows nor shrinks;
• flex: 0 0 200px — a fixed 200px width.

Common layouts

Navbar: logo left, menu right

<header class="nav">
  <a href="/" class="logo">Logo</a>
  <nav class="menu">
    <a href="/about">About</a>
    <a href="/contacts">Contacts</a>
  </nav>
</header>

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}
.menu {
  display: flex;
  gap: 24px;
}

Centering a block

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

The block sits exactly in the middle on both axes.

A row of cards

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 260px;
}

Each card aims for 260px, grows to fill the row and wraps when space runs out. Cards in the same row get equal height thanks to the default align-items: stretch.

Sticky footer

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

main takes all the free space, so the footer stays at the bottom even on a short page.

Common mistakes

• Properties on the wrong element. justify-content goes on the container, flex: 1 goes on the item.
• Long text breaks the layout. Flex items default to min-width: auto, so a long word or a table stops the item from shrinking. min-width: 0 fixes it.
• Margins instead of gap. gap doesn't add stray space at the outer edges.
• Flexbox for a 2D grid. If you need alignment by rows and columns at once, CSS Grid is easier.
• Using order to change meaning. It changes only the visual order; keyboard and screen reader users follow the HTML order.

The full property reference is on MDN.