CSS Flexbox Layout — Free HTML Tutorial

Learn CSS Flexbox Layout in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

✓ 100% Free ✓ No Login Needed ✓ NCERT / CBSE Aligned ✓ Download as PDF

TL;DR: Learn CSS Flexbox Layout in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated Sep 17, 2026

🤖 Stuck on any question? Ask Syllab's free AI Tutor for a step-by-step explanation — instant, unlimited, no login.

CSS Flexbox Layout in HTML

Flexbox: display: flex on parent. Children flex automatically. justify-content (horizontal), align-items (vertical), gap (spacing).

flex-direction: row (default) or column. flex-wrap: wrap for multi-line. flex: 1 on children for equal width.

Perfect for navbars, card layouts, button groups. Responsive by default.

CSS Flexbox Layout — Syntax

<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }
  .flex-item { flex: 1; }
</style>

Learn CSS Flexbox Layout step by step with Syllab's free interactive HTML tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full HTML course →