Flexbox Layout Tutorial — Build Flexible CSS Layouts

Flexbox (Flexible Box Layout) is a CSS layout module for distributing space along a single axis — either horizontally (row) or vertically (column). It solves the layout problems that were painful with floats and positioning: equal heights, vertical centering, distributing space evenly.

Use the Flexbox Generator to configure flexbox properties visually and copy the generated CSS.

Flex container vs flex items

Flexbox operates on two levels:

• Flex container: The parent element with display: flex
• Flex items: Direct children of the flex container

<div class="container">  <!-- flex container -->
  <div>Item 1</div>      <!-- flex item -->
  <div>Item 2</div>      <!-- flex item -->
  <div>Item 3</div>      <!-- flex item -->
</div>

.container {
  display: flex;
}

Container properties

flex-direction

Sets the main axis direction:

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

Distributes space along the main axis:

justify-content: flex-start;    /* Pack items at start */
justify-content: flex-end;      /* Pack items at end */
justify-content: center;        /* Center all items */
justify-content: space-between; /* Even gaps, no outer margins */
justify-content: space-around;  /* Even gaps including outer margins */
justify-content: space-evenly;  /* Truly even spacing everywhere */

space-between: [item] gap [item] gap [item]
space-around:  margin [item] margin margin [item] margin margin [item] margin
space-evenly:  gap [item] gap [item] gap [item] gap

align-items

Aligns items on the cross axis (perpendicular to main axis):

align-items: stretch;   /* Default: items fill container height */
align-items: flex-start; /* Align to start of cross axis */
align-items: flex-end;  /* Align to end of cross axis */
align-items: center;    /* Center on cross axis */
align-items: baseline;  /* Align text baselines */

align-items: center is the easiest way to vertically center content in CSS.

flex-wrap

Controls whether items wrap to the next line:

flex-wrap: nowrap;  /* Default: all items on one line (may overflow) */
flex-wrap: wrap;    /* Items wrap to next line */
flex-wrap: wrap-reverse; /* Wrap, but wrap to reverse direction */

gap

Sets spacing between flex items (modern, preferred over margins):

gap: 16px;          /* Same gap row and column */
gap: 16px 8px;      /* Row gap 16px, column gap 8px */
row-gap: 16px;      /* Only row gap */
column-gap: 8px;    /* Only column gap */

Item properties

flex (the shorthand)

The flex shorthand sets three values:

flex: flex-grow flex-shrink flex-basis;

flex: 1;      /* flex: 1 1 0% — grow to fill, shrink, start at 0 */
flex: auto;   /* flex: 1 1 auto — grow/shrink from natural size */
flex: none;   /* flex: 0 0 auto — don't grow or shrink */
flex: 0 1 200px; /* Don't grow, can shrink, start at 200px */

flex-grow: How much this item takes from available space. flex: 1 on all items = equal distribution. flex: 2 on one = takes twice as much as flex: 1 items.

flex-shrink: How much this item shrinks if there’s not enough space. flex-shrink: 0 = don’t shrink (keep at basis size).

flex-basis: Starting size before growth/shrinkage is applied. auto = use the item’s natural size. 0 = ignore natural size, distribute purely by ratio.

align-self

Override the container’s align-items for a specific item:

.item-special {
  align-self: flex-end;  /* This item aligns differently */
}

order

Change the visual order without changing DOM order:

.item-first { order: -1; } /* Move before all other items */
.item-last  { order: 999; } /* Move after all other items */
/* Default order is 0 for all items */

Note: order changes visual order only, not keyboard navigation order (which follows DOM order). Use for visual reordering, not content importance.

Common layout patterns

Center anything

.center-container {
  display: flex;
  justify-content: center;  /* Horizontal center */
  align-items: center;      /* Vertical center */
  min-height: 100vh;        /* Full viewport height */
}

Navigation bar

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

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

Card grid with equal heights

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

.card {
  flex: 1 1 300px; /* Grow, shrink, min-width 300px */
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1; /* Grow to fill remaining space */
}

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

Sidebar layout

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 280px; /* Fixed 280px, don't grow or shrink */
}

.main-content {
  flex: 1; /* Take all remaining space */
}

Responsive flex to column

.section {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .section {
    flex-direction: column;
  }
}

Equal-width buttons

.button-group {
  display: flex;
  gap: 8px;
}

.button-group button {
  flex: 1; /* All buttons equal width */
}

Flexbox vs CSS Grid

Use Flexbox for:

• One-dimensional layouts (a row OR a column)
• Distributing items in a navigation bar
• Centering single elements
• Card components where items should size to content

Use Grid for:

• Two-dimensional layouts (rows AND columns simultaneously)
• Overlapping elements
• Pixel-precise grid layouts
• Complex asymmetric layouts

In practice, you often use both: Grid for the overall page layout, Flexbox for components within the layout.

Related tools

• Flexbox Generator — configure and preview flexbox visually
• CSS Flexbox Guide — complete flexbox property reference
• CSS Grid Guide — two-dimensional layouts