Flexbox Basics

🎨 CSS3+ 🟢 Chapter 21 of 49 📂 Phase 08: Flexbox 📅 2026 Edition

📌 Covered in this chapter: Flexbox Definition · Container · Items · Main Axis · Cross Axis · display:flex · flex-direction · flex-wrap · gap · justify-content · align-items · align-content

Welcome to Chapter 21: Flexbox Basics — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.

1Flexbox Ante Enti?

Flexbox ante enti? Flexbox one-dimensional layout model — items ni row or column direction lo arrange and align cheyyadaniki optimized. Main axis along flow, cross axis perpendicular.

Flex container lo direct children flex items avuthayi.

2Flex Container Properties

CSS — Navbar▶ Try in Editor

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

flex-direction — row (default), column, row-reverse, column-reverse
flex-wrap — nowrap, wrap, wrap-reverse
flex-flow — direction + wrap shorthand
justify-content — main axis alignment (flex-start, center, space-between, space-around)
align-items — cross axis alignment (stretch, center, flex-start, flex-end)
align-content — multi-line cross axis (when wrap enabled)
gap — space between items (modern, margin hacks avoid)

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026