← Back to Play
Lab Space

CSS Flexbox Lab

Experiment with Flexbox properties and recreate visual layouts. Master main vs. cross axis alignments in real time.

Progress1 of 6 (17%)
Objective

1. Enable Flexbox

Start by enabling Flexbox layout on the container to align the items horizontally in a row.

Target DesignGoal Layout
A
B
C
Your Workspace (Live Sandbox)
A
B
C
Generated CSS
styles.css
.container {
display: block;}