learning-css--interactive

Flexbox — Baby Steps Interactive Tutorial

👋 Introduction to Flexbox

Flexbox (Flexible Box Layout) helps create flexible and responsive layouts easily. You can control alignment, direction, spacing, and order of elements with a small set of CSS properties. Use the interactive stages below to practice; the keywords section has example code + SVGs to help you remember.

🧩 Key Flexbox Keywords — quick reference

display: flex

Makes an element a flex container so its direct children become flex items.

/* Example 1: horizontal layout */
.container { display: flex; }

/* Example 2: inline-flex for inline behavior */
.badge { display: inline-flex; align-items: center; }

justify-content

Controls distribution of items along the main axis.

/* Example 1: center horizontally */
.container { display:flex; justify-content:center; }

/* Example 2: space-between */
.container { display:flex; justify-content:space-between; }

align-items

Aligns items along the cross axis (perpendicular to the main axis).

/* Example 1: center vertically */
.container { display:flex; align-items:center; }

/* Example 2: align items at start */
.container { display:flex; align-items:flex-start; }

flex-direction

Sets the main axis direction (row or column).

/* Example 1: row (default) */
.container { display:flex; flex-direction:row; }

/* Example 2: column */
.container { display:flex; flex-direction:column; }

flex-wrap

Controls whether items wrap onto multiple lines when they overflow.

/* Example 1: allow wrapping */
.container { display:flex; flex-wrap:wrap; }

/* Example 2: no wrap */
.container { display:flex; flex-wrap:nowrap; }

flex

Shorthand for flex-grow, flex-shrink, and flex-basis.

/* Example 1: flexible items */
.item { flex: 1; }

/* Example 2: fixed basis */
.item { flex: 0 0 200px; }

📄 Relevant Code

Use the controls to explore each stage and click Check to verify your layout.