CSS: Flexbox Layout

Build flexible one-dimensional layouts with rows and columns.

display: flex

Adding display: flex to a container makes it a flex container. Its direct children automatically become flex items and are arranged in a row by default.

`display: flex`

Flexbox is a one-dimensional layout model. It controls items along a single axis, either a row or a column, at a time.

flex container: the parent element with display: flex
flex items: the direct children of the flex container
By default items are placed in a horizontal row
Items shrink to fit their content unless told otherwise
Flexbox replaced float-based layouts for most use cases

display: flex

Three items laid out in a row inside a flex container.

.container {
  display: flex;
  background: #f0f4f8;
  padding: 12px;
  gap: 10px;
}

.item {
  background: steelblue;
  color: white;
  padding: 12px 20px;
  border-radius: 4px;
}

flex-direction

flex-direction sets the main axis, the direction in which flex items are placed. The default is row (left to right).

`flex-direction`

The main axis is defined by flex-direction. justify-content always works along the main axis, and align-items works along the cross axis (perpendicular to it).

row: left to right (default)
row-reverse: right to left
column: top to bottom
column-reverse: bottom to top
Changing flex-direction also swaps which axis justify-content and align-items apply to

flex-direction

Row lays items horizontally; column stacks them vertically.

.row, .col {
  display: flex;
  background: #f0f4f8;
  padding: 12px;
  gap: 8px;
  margin-bottom: 12px;
}

.col { flex-direction: column; }

.item {
  background: steelblue;
  color: white;
  padding: 10px 16px;
  border-radius: 4px;
}

flex-wrap

By default, flex items try to fit onto one line and shrink if needed. Setting flex-wrap: wrap allows items to flow onto multiple lines when there is not enough space.

`flex-wrap`

Use flex-wrap: wrap when you have many items that should flow naturally onto new rows, such as a tag list or a card grid.

nowrap: all items on one line, shrink if needed (default)
wrap: items wrap onto the next line when they overflow
wrap-reverse: items wrap upward instead of downward
gap: use gap to add space between wrapped rows and columns

flex-wrap: wrap

Items wrap onto a new row instead of overflowing or shrinking.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #f0f4f8;
  padding: 12px;
}

.item {
  background: steelblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  width: 120px;
  text-align: center;
}

justify-content

justify-content controls how flex items are distributed along the main axis. It only has an effect when there is extra space in the container.

`justify-content`

justify-content distributes space along the main axis. For row containers this is horizontal alignment; for column containers this is vertical.

flex-start: items packed to the start (default)
flex-end: items packed to the end
center: items centered in the container
space-between: first item at start, last at end, equal gaps between
space-around: equal space around each item
space-evenly: equal space between all items and the edges

justify-content

space-between spreads items to edges; center groups them in the middle.

.between, .center {
  display: flex;
  background: #f0f4f8;
  padding: 12px;
  margin-bottom: 10px;
}

.between { justify-content: space-between; }
.center  { justify-content: center; gap: 10px; }

.item {
  background: steelblue;
  color: white;
  padding: 10px 16px;
  border-radius: 4px;
}

align-items

align-items controls how flex items are aligned along the cross axis (perpendicular to the main axis). For a row container, this controls vertical alignment.

`align-items`

align-items applies to all items in the container. Use align-self on an individual item to override this for just that item.

stretch: items fill the container height (default)
flex-start: items aligned to the top
flex-end: items aligned to the bottom
center: items centered vertically
baseline: items aligned by their text baseline

align-items: center

Items of different heights are all centered vertically in the container.

.container {
  display: flex;
  align-items: center;
  background: #f0f4f8;
  padding: 12px;
  gap: 10px;
  height: 100px;
}

.item   { background: steelblue; color: white; padding: 8px 14px; border-radius: 4px; }
.short  { height: 30px; }
.tall   { height: 70px; }
.medium { height: 50px; }

align-content

align-content controls the spacing between rows when items have wrapped onto multiple lines. It has no effect when all items sit on a single line.

`align-content`

align-content only works when flex-wrap: wrap is set and there are multiple rows. It behaves like justify-content but for the cross axis across multiple rows.

flex-start: rows packed to the top
flex-end: rows packed to the bottom
center: rows centered
space-between: first row at top, last row at bottom, equal gaps
stretch: rows stretch to fill the container height (default)
Requires flex-wrap: wrap and a fixed height on the container

align-content: space-between

Two wrapped rows are pushed to the top and bottom of the container.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  background: #f0f4f8;
  padding: 12px;
  gap: 8px;
  height: 160px;
}

.item {
  background: steelblue;
  color: white;
  padding: 10px 18px;
  border-radius: 4px;
  width: 80px;
  text-align: center;
}

flex-grow, flex-shrink, flex-basis

These three properties are set on flex items and control how each item grows, shrinks, and what its starting size is before space is distributed.

`flex-grow, flex-shrink, flex-basis`

These properties define how a flex item responds to available space. flex-basis sets the starting size; flex-grow and flex-shrink control how it adjusts from there.

flex-basis: the initial size before space is distributed (acts like width in a row)
flex-grow: 0: item does not grow (default)
flex-grow: 1: item grows to fill available space
flex-shrink: 1: item can shrink when space is tight (default)
flex-shrink: 0: item refuses to shrink (stays at flex-basis size)

flex-grow

The middle item takes twice the extra space compared to the others.

.container {
  display: flex;
  background: #f0f4f8;
  padding: 12px;
  gap: 8px;
}

.item   { color: white; padding: 12px; border-radius: 4px; text-align: center; }
.grow-1 { flex-grow: 1; background: steelblue; }
.grow-2 { flex-grow: 2; background: crimson; }

flex Shorthand

The flex shorthand combines flex-grow, flex-shrink, and flex-basis in one declaration.

`flex shorthand`

flex: 1 is shorthand for flex: 1 1 0, it lets the item grow and shrink freely from zero. This is the most common way to make items share space equally.

flex: 1: grow: 1, shrink: 1, basis: 0, equal sharing of all space
flex: auto: grow: 1, shrink: 1, basis: auto, grow from content size
flex: none: grow: 0, shrink: 0, basis: auto, fixed size, no flexibility
flex: 0 0 200px: fixed 200px, does not grow or shrink

flex shorthand

Sidebar is a fixed width; main content fills the remaining space.

.container {
  display: flex;
  gap: 12px;
  background: #f0f4f8;
  padding: 12px;
}

.sidebar {
  flex: 0 0 160px;
  background: #334155;
  color: white;
  padding: 12px;
  border-radius: 4px;
}

.main {
  flex: 1;
  background: steelblue;
  color: white;
  padding: 12px;
  border-radius: 4px;
}

order Property

The order property changes the visual order of flex items without changing the HTML source order. The default is 0 for all items. Lower numbers appear first.

`order`

order only affects visual rendering, not the DOM order. Screen readers and keyboard tab focus still follow source order, so use it with care for accessibility.

Default value is 0 for all items
Items with a lower order value appear first
Items with the same order follow their source order
order: -1: moves an item before all items with order: 0
Does not change keyboard tab order, accessibility consideration

order

Items display as B, C, A regardless of their order in the HTML.

.container {
  display: flex;
  gap: 10px;
  background: #f0f4f8;
  padding: 12px;
}

.item { background: steelblue; color: white; padding: 12px 16px; border-radius: 4px; }
.a { order: 3; }
.b { order: 1; background: crimson; }
.c { order: 2; background: seagreen; }

align-self

align-self overrides the container's align-items for a single item. It accepts the same values as align-items.

`align-self`

Use align-self when most items share the same alignment but one item needs to be positioned differently on the cross axis.

auto: inherits the container's align-items value (default)
flex-start: aligns this item to the start of the cross axis
flex-end: aligns this item to the end of the cross axis
center: centers this item on the cross axis
stretch: stretches this item to fill the container height

align-self

Each item overrides the container's align-items independently.

.container {
  display: flex;
  align-items: flex-start;
  background: #f0f4f8;
  padding: 12px;
  gap: 10px;
  height: 120px;
}

.item { background: steelblue; color: white; padding: 10px 14px; border-radius: 4px; }
.end  { align-self: flex-end;  background: crimson; }
.mid  { align-self: center;    background: seagreen; }

Common Flexbox Patterns

Flexbox solves several everyday layout problems cleanly. These patterns appear constantly in real projects and are worth memorising.

`Common Flexbox Patterns`

These cover the most frequently used flexbox layouts: centering content, nav bars, and sidebar + content arrangements.

Centering (H + V): display: flex; justify-content: center; align-items: center
Nav bar: justify-content: space-between; align-items: center
Push item to far end: margin-left: auto on the item to push it right
Equal-width columns: flex: 1 on each item
Sidebar + main: flex: 0 0 200px on sidebar; flex: 1 on main

Centering with Flexbox

The classic two-line centering technique.

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background: #f0f4f8;
  border-radius: 6px;
}

.center-box p {
  background: steelblue;
  color: white;
  padding: 10px 24px;
  border-radius: 4px;
  margin: 0;
}

Flexbox Nav Bar

Logo on the left, links on the right using space-between.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1e293b;
  padding: 12px 20px;
}

.logo { color: white; font-weight: bold; }

.links a {
  color: #94a3b8;
  margin-left: 16px;
  text-decoration: none;
}

.links a:hover { color: white; }

Knowledge Check

1. Which property do you set on the container to enable Flexbox?

2. What is the default value of flex-direction?

3. Which property aligns flex items along the main axis?

4. What does flex-grow: 1 on an item do?

5. Which value of align-items stretches items to fill the container height?

6. What does flex-wrap: wrap do?

Previous Next