Lesson 4 3 min read

Flexbox Layout

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout mode designed for arranging items in one direction — either as a row or a column. Before flexbox, centering things and building responsive layouts required hacks. Flexbox makes it straightforward.

How to activate it

Add display: flex to a container. All direct children become flex items:

CSS

.container {
  display: flex;
}

HTML

<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

By default, flex items sit side by side in a row.

Main axis vs cross axis

Flexbox always has two axes:

Main axis — the direction items flow (default: horizontal).
Cross axis — perpendicular to the main axis (default: vertical).

Change the direction with flex-direction:

CSS

.container {
  display: flex;
  flex-direction: column; /* items stack vertically */
}

Alignment

justify-content — aligns items along the main axis:

CSS

.container {
  display: flex;
  justify-content: center;        /* center items */
  /* Other values: flex-start, flex-end, space-between, space-around, space-evenly */
}

align-items — aligns items along the cross axis:

CSS

.container {
  display: flex;
  align-items: center;  /* vertically center items (in a row layout) */
}

The classic centering trick

Centering something both horizontally and vertically used to be surprisingly hard. With flexbox:

CSS

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

That's it. Three lines and you have a perfectly centered element.

Making items flexible

The flex shorthand controls how items grow and shrink:

CSS

.sidebar {
  flex: 0 0 250px;  /* don't grow, don't shrink, stay at 250px */
}

.main {
  flex: 1;           /* grow to fill remaining space */
}

Wrapping

By default, flex items try to fit on one line. If you want them to wrap:

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

gap adds space between items — much cleaner than using margins.

flex-direction, flex-wrap, and gap together

These three properties define most navigation bars and card rows:

CSS

.toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem 1rem; /* row-gap | column-gap */
  align-items: center;
}

On narrow viewports, flex-wrap: wrap lets items move to the next line instead of overflowing horizontally.

Controlling individual items

Properties on flex items (children), not the container:

CSS

.item {
  flex: 1 1 200px; /* grow | shrink | basis */
  align-self: flex-end;
  order: 2; /* visual order — use sparingly for accessibility */
}

flex-grow: 1 lets an item absorb leftover space. flex-shrink: 0 prevents squashing fixed-width sidebars. Prefer gap over margin on every child for consistent spacing.

Common flexbox patterns

Sticky footer — column flex on body with `main

{

flex: 1; }

 pushes the footer to the bottom on short pages.

Split header —

justify-content: space-between

 with logo on the left and nav on the right.

Equal-height columns — flex items in a row stretch to the tallest item by default (

align-items: stretch

).

When you need control over both rows and columns at once (a full page grid), reach for CSS Grid in the next lessons — flexbox and grid complement each other rather than compete.
Choosing flex over older layout hacks

Before flexbox, developers centered columns with floats, clearfixes, and inline-block tricks. Flexbox replaces those patterns with declarative properties. A horizontal nav bar is a single flex row with

gap; a vertical app shell is flex-direction: column with flex: 1

 on the main content area. Because flex items align along one axis at a time, the mental model stays simple: decide row versus column first, then justify and align.

Flex containers create a flex formatting context, which prevents margin collapse between children — one reason flex layouts feel more predictable than block stacking. Test at multiple viewport widths:

flex-wrap and a sensible min-width

 on items prevent horizontal overflow on small screens without media queries in many cases. When a design needs row and column control on the same parent, pair Grid for the page shell with Flexbox inside each cell for toolbars and card footers.

Key takeaway

Flexbox is the go-to tool for one-dimensional layouts. Use

justify-content for the main axis, align-items for the cross axis, and gap` for spacing. For two-dimensional layouts (rows and columns simultaneously), use CSS Grid instead.