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.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

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.

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!

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.

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

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

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

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

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.