Layout with Flexbox

Level 4 of CSS School: 3 lessons, explained from scratch, with examples.

Play Level 4 in the game

Lesson 1

Rows with Flexbox

display: flex, gap and justify-content.

Lining things up in a row

Put display: flex; on a box (the container), and the boxes directly inside it (the items) line up in a row.

  • gap: 12px; puts space between the items
  • justify-content spreads them out along the row: flex-start (the default), center, flex-end, space-between

This is how most menus, toolbars and rows of cards are built.

CSS
.menu {
  display: flex;
  gap: 12px;
  justify-content: center;
}

Spreading out

justify-content: space-between; pushes the first item to the start and the last to the end, with even space between. Perfect for a header with a logo on the left and a menu on the right:

CSS
header {
  display: flex;
  justify-content: space-between;
}

Practise “Rows with Flexbox” in the game

Lesson 2

Columns, centring and wrapping

flex-direction, align-items and flex-wrap.

Rows, columns and the cross axis

  • flex-direction: column; stacks the items top to bottom instead of left to right
  • align-items lines them up across the direction: in a row, align-items: center; centres them up and down
  • flex-wrap: wrap; lets items move onto a new line when they don’t fit

Centring something in the middle of a box used to be famously hard. With Flexbox it’s three lines:

CSS
.stage {
  display: flex;
  justify-content: center;
  align-items: center;
}

Growing to fill the space

Items can grow: flex: 1; on an item makes it take up the spare space. Give two items flex: 1; and they share it equally; give one flex: 2; and it gets twice as much.

A search bar that fills the row next to a button is a classic: the input gets flex: 1; and the button stays its own size.

CSS
.search {
  display: flex;
  gap: 8px;
}
.search input {
  flex: 1;
}

Practise “Columns, centring and wrapping” in the game

Lesson 3

Pages that work on phones

max-width, media queries and responsive layouts.

One page, every screen

Your page will be seen on phones, tablets and big monitors. A responsive page adapts:

  • max-width stops text lines getting too long on big screens: main { max-width: 700px; margin: 0 auto; }
  • a media query applies some rules only when the screen is small (or big):
CSS
.cards {
  display: flex;
  gap: 16px;
}

@media (max-width: 600px) {
  .cards {
    flex-direction: column;
  }
}

Tip: Read it as: “when the screen is 600px wide or less, stack the cards”. Try making your browser window narrow on a page like this.

The viewport tag

Phones pretend to be wide screens unless you tell them not to. Every responsive page has this line in its <head>:

It says “use the real width of the device”, so your media queries work.

HTML
<meta name="viewport" content="width=device-width, initial-scale=1">

Practise “Pages that work on phones” in the game

Recap

What Level 4 covers, in a few lines.

  • display: flex; on a box lines up the boxes inside it in a row. flex-direction: column; stacks them instead.
  • justify-content spreads them along the row (center, space-between...); align-items lines them up across it (center, flex-start...).
  • gap: 16px; puts space between the items. flex-wrap: wrap; lets them move to a new line when there isn’t room.
  • A media query, @media (max-width: 600px) { ... }, applies rules only on small screens. Together with max-width and Flexbox, that’s how pages work on phones and computers.

Now try it in CSS School

Write real code and watch your page change as you type, with a check after every step and a test at the end of each level. Free.

Start learning