Flexbox from scratch

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout system designed to distribute space and align elements within a container, even when their size is unknown or dynamic.

It is activated with display: flex on the parent element. All its direct children automatically become flex items.

The two axes of Flexbox

Flexbox works on two axes:

• Main axis: defined by flex-direction. By default, it is horizontal (left to right).
• Cross axis: perpendicular to the main axis. By default, it is vertical.

Understanding these axes is fundamental because justify-content aligns along the main axis and align-items along the cross axis.

Flex container properties

flex-direction

Controls the direction of the main axis:

justify-content (main axis)

Distributes items along the main axis:

align-items (cross axis)

Aligns items on the cross axis:

flex-wrap

By default, flex items are squeezed into a single line. With flex-wrap: wrap, they can jump to the next line when there is not enough space.

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

gap

Defines the space between flex items without using margin. Accepts one or two values (row and column):

.container {
  gap: 1rem;        /* Same space on both axes */
  gap: 1rem 2rem;   /* 1rem vertical, 2rem horizontal */
}

Flex item properties

flex-grow, flex-shrink, and flex-basis

These three properties control how items expand or shrink:

• flex-grow: how much the item grows to fill leftover space (default: 0)
• flex-shrink: how much the item shrinks if there is not enough space (default: 1)
• flex-basis: base size before distributing space (default: auto)

The flex shorthand

The flex property combines all three:

.item { flex: 1; }           /* grow:1, shrink:1, basis:0 */
.item { flex: 0 0 200px; }   /* Fixed size of 200px */
.item { flex: 2 1 auto; }    /* Grows twice as much, shrinks, auto basis */

align-self

Allows an individual item to align differently from the rest on the cross axis:

.special-item {
  align-self: flex-end; /* Only this item goes to the bottom */
}

order

Changes the visual order of an item without modifying the HTML:

.first { order: -1; } /* Appears before the others */
.last  { order: 99; } /* Appears at the end */

Common Flexbox patterns

Perfect centering

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

Footer stuck to the bottom

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

Responsive cards without media queries

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 300px; /* Minimum 300px, grows if there is space */
}

Flexbox dominates one-dimensional layouts. In the next lesson, we will learn CSS Grid, which takes two-dimensional layouts to another level.

Practice

1. Build a navbar with Flexbox: Create a navigation bar with a logo on the left and links on the right using display: flex, justify-content: space-between, and align-items: center.
2. Center an element vertically and horizontally: Use a flex container with justify-content: center and align-items: center to center a box in the full viewport.
3. Create responsive cards with flex-wrap: Build a card grid using flex-wrap: wrap and flex: 1 1 300px so the cards adapt automatically without media queries.