Flexbox

About CSS

CSS (Cascading Style Sheets) controls how web content looks and adapts to different screens. It handles layout, colours, typography and visual effects while HTML supplies the content.

• Responsive layouts
• Visual styling
• Animation

Created by

Håkon Wium Lie and Bert Bos

First released

1996 · CSS1 standard (proposed in 1994)

Version / standard

Evolving CSS modules

Features have separate specification levels; CSS has no single latest version.

In the real world

• GitHub: The Primer CSS design system
• GOV.UK: GOV.UK Frontend styles
• Wikimedia: The Codex interface design system

Facts checked 8 September 2026. Links open the sources; examples describe specific products or documented uses.

Syntax

display: flex;

Examples

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  gap: 12px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.box { flex: 1 1 120px; }

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.box {
  flex: 1 1 140px;
  min-width: 0;
  padding: 24px;
}
@media (max-width: 480px) {
  .container { flex-direction: column; }
  .box { flex-basis: auto; width: auto; }
}

.container {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #f5f5f5;
}

.item {
  background: #007bff;
  color: white;
  padding: 20px;
  border-radius: 8px;
  flex: 1;
}

/* Center items */
.center {
  display: flex;
  justify-content: center;
}

/* Space between items */
.space-between {
  display: flex;
  justify-content: space-between;
}

/* Space around items */
.space-around {
  display: flex;
  justify-content: space-around;
}

/* End alignment */
.end {
  display: flex;
  justify-content: flex-end;
}

.container {
  display: flex;
  height: 200px;
  align-items: center; /* center | flex-start | flex-end | stretch */
  background: #e9ecef;
}

/* Stretch items to fill height */
.stretch-container {
  display: flex;
  align-items: stretch;
  height: 150px;
}

.stretch-container .item {
  background: #28a745;
  color: white;
}

/* Default - row */
.row {
  display: flex;
  flex-direction: row;
}

/* Column layout */
.column {
  display: flex;
  flex-direction: column;
  height: 300px;
}

/* Reverse directions */
.row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

Parameters and values

• display (flex | inline-flex): Defines a flex container
• flex-direction (row | column | row-reverse | column-reverse): Sets the main axis direction
• justify-content (flex-start | center | space-between | space-around): Aligns items along main axis
• align-items (flex-start | center | flex-end | stretch): Aligns items along cross axis
• gap (length): Sets spacing between flex items
• flex-wrap (nowrap | wrap | wrap-reverse): Controls wrapping of flex items

Best practices

• Use flexbox for one-dimensional layouts (either row or column)
• Add gap property instead of margins for consistent spacing between items
• Use flex: 1 on items to make them grow equally to fill available space
• Combine justify-content and align-items for perfect centering
• Enable flex-wrap: wrap for responsive layouts that adapt to screen size
• Consider using CSS Grid for two-dimensional layouts instead

At a glance

Purpose

Presentation and layout

File extension

.css

Runs in

Web browsers

Usually used with

HTML and JavaScript

In plain English

Flexbox lets a parent arrange its children along a main axis. It is useful when a row or column of items needs flexible spacing and alignment.

What you’ll learn

• Create a flex container.
• Tell the main axis from the cross axis.
• Wrap items without changing their reading order.

Before you start: HTML · The Box Model

Breaking down the syntax

display: flex

Makes direct in-flow children flex items.

flex-direction

Sets the main axis; row follows the inline direction.

justify-content

Distributes available space on the main axis.

align-items

Aligns items on the cross axis.

How it works

Container

display: flex establishes the formatting context.

Main axis

Items are sized and placed along the direction chosen by flex-direction.

Cross axis

Alignment places items across the perpendicular direction.

When should I use this?

Use Flexbox for toolbars, navigation, button groups and one-dimensional arrangements. Use Grid when rows and columns need coordinated tracks.

Common mistakes

Aligning the child instead of the container

justify-content controls a flex container. Put it on the parent whose items you want to arrange.

Incorrect

.item { justify-content: center; }

Corrected

.container {
  display: flex;
  justify-content: center;
}

Compare approaches

• Flexbox: One-dimensional content-driven arrangement.
• Grid: Coordinated rows and columns.

Accessibility

• Keep source order meaningful; order and reverse directions can separate visual and keyboard reading order.
• Allow wrapping and test at narrow widths and browser zoom.

Explore deeper

Why an item sometimes refuses to shrink

Flex items have an automatic minimum size which can depend on their content. If a text region should shrink and wrap, min-width: 0 on that item may be necessary. Avoid hiding overflow as a substitute for understanding the sizing.

Specifications & further reading

• W3C: CSS Flexible Box Layout

Related CSS documentation