Codectionary / Developer documentation / CSS

Flexbox

Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.

Before you start: HTML · The Box Model

Syntax

display: flex;

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

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.

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.

Examples

Centre a group

The preview supplies a .container with three .box children.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  gap: 12px;
}
  1. display creates a flex context.
  2. justify-content centres the group along the row.
  3. align-items centres the children vertically for this row.
  4. The container now contains actual flex children with the class names used by this example.
  5. Spacing, wrapping and available room determine where these learning tasks appear.
  6. Change justify-content or align-items and rerun to compare the resulting arrangement.
HTML used by this example
<div class="container preview-frame"><div class="box preview-tile">Read a guide</div><div class="box preview-tile">Run an experiment</div><div class="box preview-tile">Explain what changed</div><div class="box preview-tile">Build something small</div></div>

Wrap on small screens

Let cards move onto additional lines.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.box { flex: 1 1 120px; }
  1. flex-wrap allows new flex lines.
  2. The 120px basis is the starting main size.
  3. Items can grow and shrink within their flex line.
  4. The container now contains actual flex children with the class names used by this example.
  5. Spacing, wrapping and available room determine where these learning tasks appear.
  6. Resize the preview: items can wrap or change direction as the rules allow.
HTML used by this example
<div class="container preview-frame"><div class="box preview-tile">Read a guide</div><div class="box preview-tile">Run an experiment</div><div class="box preview-tile">Explain what changed</div><div class="box preview-tile">Build something small</div></div>

A responsive group

Switch to a column when the preview viewport is narrow.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

.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; }
}
  1. The media query switches the main axis.
  2. Resetting the basis avoids an unwanted 140px height in column layout.
  3. The DOM order stays unchanged.
  4. The container now contains actual flex children with the class names used by this example.
  5. Spacing, wrapping and available room determine where these learning tasks appear.
  6. Resize the preview: items can wrap or change direction as the rules allow.
HTML used by this example
<div class="container preview-frame"><div class="box preview-tile">Read a guide</div><div class="box preview-tile">Run an experiment</div><div class="box preview-tile">Explain what changed</div><div class="box preview-tile">Build something small</div></div>

Basic Flex Container

Converting a container to a flex layout to automatically arrange child elements.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

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

.item {
  background: #007bff;
  color: white;
  padding: 20px;
  border-radius: 8px;
  flex: 1;
}
  1. The container now contains actual flex children with the class names used by this example.
  2. Spacing, wrapping and available room determine where these learning tasks appear.
  3. Change justify-content or align-items and rerun to compare the resulting arrangement.
HTML used by this example
<div class="container preview-frame"><div class="item">Read a guide</div><div class="item">Run an experiment</div><div class="item">Explain what changed</div><div class="item">Build something small</div></div>

Justify Content

Controlling horizontal alignment of flex items within the container.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

/* 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;
}
  1. Each row has the same three children and enough free space for alignment to be visible.
  2. justify-content distributes that free space differently in each labelled row.
  3. Narrow the preview to see how the amount of available space changes.
HTML used by this example
<h3>center</h3><div class="center preview-frame"><div class="preview-tile">A</div><div class="preview-tile">B</div><div class="preview-tile">C</div></div><h3>space-between</h3><div class="space-between preview-frame"><div class="preview-tile">A</div><div class="preview-tile">B</div><div class="preview-tile">C</div></div><h3>space-around</h3><div class="space-around preview-frame"><div class="preview-tile">A</div><div class="preview-tile">B</div><div class="preview-tile">C</div></div><h3>end</h3><div class="end preview-frame"><div class="preview-tile">A</div><div class="preview-tile">B</div><div class="preview-tile">C</div></div>

Align Items

Controlling vertical alignment of flex items along the cross axis.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

.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;
}
  1. The fixed container height creates visible cross-axis space.
  2. align-items:center centres the children; stretch can fill the cross axis when their sizes are automatic.
  3. Compare item heights without changing their document order.
HTML used by this example
<h3>Centre on the cross axis</h3><div class="container"><div class="item preview-tile">Short</div><div class="item preview-tile">A taller item<br>with two lines</div></div><h3>Stretch</h3><div class="stretch-container"><div class="item preview-tile">Short</div><div class="item preview-tile">Taller<br>item</div></div>

Flex Direction

Changing the main axis direction of flex items (row or column).

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}

/* 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;
}
  1. Each labelled group uses the same document sequence.
  2. flex-direction changes the main axis or reverses its visual direction.
  3. The reverse values do not rewrite reading or keyboard order; keep meaningful sequences in logical HTML order.
HTML used by this example
<h3>row</h3><div class="row preview-frame"><div class="preview-tile">1</div><div class="preview-tile">2</div><div class="preview-tile">3</div></div><h3>column</h3><div class="column preview-frame"><div class="preview-tile">1</div><div class="preview-tile">2</div><div class="preview-tile">3</div></div><h3>row-reverse</h3><div class="row-reverse preview-frame"><div class="preview-tile">1</div><div class="preview-tile">2</div><div class="preview-tile">3</div></div><h3>column-reverse</h3><div class="column-reverse preview-frame"><div class="preview-tile">1</div><div class="preview-tile">2</div><div class="preview-tile">3</div></div>

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

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

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