InfoparkDailyCAREER TOOLS

CSS · Lesson 5 of 7

Flexbox

One-dimensional layout: rows, columns, alignment and gaps.

Set display: flex on a container and its children line up in a row.

  • flex-direction: row or column.
  • justify-content: alignment along the main axis (space-between, center…).
  • align-items: alignment on the cross axis.
  • gap: space between items. flex-wrap: wrap lets items move to the next line.
  • On children: flex: 1 to grow and share space.

Try it yourself

Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.

Key points

  • display:flex on the parent.
  • justify-content = main axis, align-items = cross axis.
  • gap beats margins for spacing.

Quick check

Which property spaces flex items along the main axis?

Practice task

Build a navbar with the logo on the left and three links on the right, vertically centred.

Interview corner

How do you centre an element horizontally and vertically?

Make the parent display:flex with justify-content:center and align-items:center (or display:grid with place-items:center).

What does flex: 1 mean?

Shorthand for flex-grow:1, flex-shrink:1, flex-basis:0 — items share the free space equally.

Further reading

Official documentation, linked for deeper study. These are outside sites; this lesson's text is our own.

Original lesson written by the InfoparkDaily team · © 2026 InfoparkDaily · Free to learn — no paid course or subscription.