CSS Master · Flexbox

Flex Escape — free CSS Flexbox game

A horde is closing in on a night-time building site. Crane rigs hold steel beams and crates, and flexbox is the only way to move them. Build the route, then run.

0/ 36
Site 1
.rigEXIT
Live prediction: the runner falls into the gap
easySite 1 of 12

Push it over

The horde is behind you and the bridge is out. A crane rig holds one steel beam, but it hangs on the wrong side of the gap.

A rig is a div. Out of the box it is a plain block, so the beam just sits at its top-left corner.

display: flex turns the rig into a flex container: its children line up along the main axis, left to right by default.

justify-content decides where the children sit on that axis: flex-start, center, flex-end and the space-* values.

Your task

Make the rig a flex container and push the beam to the far end so it spans the gap.

  • display: flex on the rig
  • justify-content moves the beam
site.htmlread only · sizes locked
<div class="rig">
  <div class="beam"></div>
</div>
rigs.css

About Flex Escape

Flex Escape is a free CSS Flexbox game: type real flexbox properties to build an escape route across 12 night-time building sites. Instant visual feedback teaches layout the way interviews expect you to use it.

What you practice

FAQ

What is Flex Escape?
Flex Escape is a free browser CSS Flexbox game on Playhire. A horde closes in on a building site; you write real flexbox CSS to move steel beams and open an escape path across 12 levels.
What Flexbox skills does Flex Escape teach?
You practice display: flex, justify-content, align-items, flex-direction, flex-wrap and gap — the same properties used in Flexbox Froggy-style tutorials and CSS layout interviews.
Are these CSS Flexbox games free?
Yes. Every Playhire CSS game — Flex Escape, Flex Strike, Blueprint, Drone Dock and more — is free to play in the browser. Sign in only if you want XP, leaderboard rank and certificates.
Do I need to install anything to play a CSS game?
No. Open the game in your browser, write real CSS, and see the layout update instantly. No npm install, no signup required to start.
Is this a Flexbox Froggy alternative?
Playhire’s Flexbox games teach the same CSS Flexbox skills (justify-content, align-items, flex-direction, gap, order, flex-grow) but with different themes: escape rooms, shooters, blueprints and drone docking — plus Grid, selectors and HTML labs on the CSS Master path.

More CSS games