Flex Properties

justify, align, wrap, grow, basis — the Full Toolkit

Flex Properties

Beyond direction and gap, flex has properties for alignment, wrapping, and item sizing.

6 min read Level 2/5 #css#flexbox#alignment

What you'll learn

Now the rest of flexbox. These properties live on the container unless otherwise noted.

Alignment Along the Main Axis — `justify-content`

The “main axis” is the direction of the flex. For a row, it’s horizontal.

Value	What it does
`flex-start`	Pack at the start (default)
`flex-end`	Pack at the end
`center`	Centered
`space-between`	Equal space BETWEEN items, none at the edges
`space-around`	Equal space around each item
`space-evenly`	Equal space EVERYWHERE (including edges)

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

A logo on the left, links on the right — classic header pattern.

The cross axis is perpendicular to the main axis. For a row, it’s vertical.

Value	What it does
`stretch`	Items fill the cross axis (default)
`flex-start`	Top (or start)
`flex-end`	Bottom (or end)
`center`	Centered
`baseline`	Align by text baselines

The flex-centering one-liner:

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

For a full-page hero:

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

By default, flex items don’t wrap — they shrink to fit. To wrap:

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.gallery > * {
  flex: 1 1 200px;   /* grow, shrink, basis 200px */
}

Items wrap to a new line when there’s no room. The flex: 1 1 200px shorthand means “grow to fill, shrink if needed, base size 200px”.

Per item (these go on the FLEX ITEM, not the container):

Property	What
`flex-grow`	How much to grow when there’s extra space (default 0)
`flex-shrink`	How much to shrink when overflowing (default 1)
`flex-basis`	The starting size before grow/shrink
`flex`	Shorthand: `<grow> <shrink> <basis>`

.sidebar { flex: 0 0 250px; }   /* fixed 250px, no grow, no shrink */
.main    { flex: 1; }            /* take all remaining space */

Classic “sidebar + main” layout.

align-self overrides align-items for one item:

.special { align-self: center; }

Reorder items visually without changing the HTML:

.first  { order: -1; }   /* before everything */
.last   { order: 99; }

Use sparingly — visual and source order diverging breaks keyboard / screen-reader navigation.

Grid — the two-dimensional cousin.