Flexbox

Flexbox is a one-dimensional CSS layout model that distributes space and aligns items along a single row or column using justify-content and align-items , making it the go-to tool for navbars, toolbars, and centring content.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

💡 Think of Flexbox Like This

Imagine a bookshelf: You can arrange books left-to-right (row) or stack them top-to-bottom (column). You can push them to the left, center, or spread them evenly. Flexbox gives you this same control over web elements!

Property

Real-World Analogy

What It Does

display: flex

Turning a container into a shelf

Enables flexbox on container

justify-content

How books spread across the shelf

Horizontal alignment

align-items

How tall/short books align

Vertical alignment

gap

Space between books

Spacing between items

flex-direction

Horizontal vs vertical shelf

Row or column layout

What is Flexbox?

Flexbox is a powerful one-dimensional layout system that makes it easy to align and distribute items in a container, even when their size is unknown or dynamic.

justify-content (Main Axis)

Controls how items are distributed along the main axis (horizontal by default).

align-items (Cross Axis)

Controls how items are aligned along the cross axis (vertical by default).

Perfect Centering

The holy grail of CSS - centering both horizontally AND vertically!

flex-direction

Change the main axis direction - row (horizontal) or column (vertical).

Practice: Build a Navigation Bar

🎉 Lesson Complete

You now have a solid grasp of Flexbox — the most-used layout tool in modern CSS. Key takeaways:

Practice quiz

What does the declaration display: flex do to an element?

  • It makes the element a flex container, laying out its direct children as flex items
  • It makes the element itself a flex item inside its parent
  • It centers the element on the page automatically
  • It hides the element until it is needed

Answer: It makes the element a flex container, laying out its direct children as flex items. display: flex turns the element into a flex container; its direct children become flex items.

Which property controls how flex items are distributed along the main axis?

  • align-items
  • justify-content
  • flex-direction
  • align-content

Answer: justify-content. justify-content distributes items along the main axis (horizontal by default).

Which property aligns flex items along the cross axis?

  • justify-content
  • gap
  • align-items
  • order

Answer: align-items. align-items controls alignment on the cross axis (vertical by default in a row).

What is the default value of flex-direction on a flex container?

  • column
  • row
  • row-reverse
  • column-reverse

Answer: row. The default is row, so items flow left to right along a horizontal main axis.

Which justify-content value places equal space between items but no space at the outer edges?

  • space-around
  • space-evenly
  • space-between
  • center

Answer: space-between. space-between puts the first and last items at the edges with equal gaps between all items.

To perfectly center a single item both horizontally and vertically in a flex container, you use:

  • justify-content: center; align-items: center;
  • text-align: center; vertical-align: middle;
  • margin: auto; padding: auto;
  • align-content: center; order: 0;

Answer: justify-content: center; align-items: center;. justify-content: center centers on the main axis and align-items: center on the cross axis.

When flex-direction is set to column, what becomes the main axis?

  • The horizontal axis
  • The vertical axis
  • There is no main axis
  • Both axes equally

Answer: The vertical axis. With flex-direction: column the main axis is vertical, so justify-content then works top-to-bottom.

What does the gap property do in a flex container?

  • Adds space between flex items without adding space on the outer edges
  • Adds equal padding inside every flex item
  • Removes the default margins from items
  • Sets the minimum width of each item

Answer: Adds space between flex items without adding space on the outer edges. gap creates consistent spacing between flex items without edge margins.

Which align-items value makes items fill the full height of the container's cross axis?

  • flex-start
  • center
  • stretch
  • flex-end

Answer: stretch. stretch (the default) makes items expand to fill the cross-axis size of the container.

Flexbox is best described as which kind of layout model?

  • A two-dimensional model controlling rows and columns at once
  • A one-dimensional model that lays items out along a single axis
  • A model only for absolute positioning
  • A model only for table layouts

Answer: A one-dimensional model that lays items out along a single axis. Flexbox is one-dimensional: it arranges items along a single row or column.

Continue this course