Flexbox — Complete Guide

Flexbox — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of CSS Tutorial on Toolliyo Academy.

8 min read Updated 8/21/2026

On this page

CSS Tutorial · Lesson 13 of 100

Flexbox

Foundations & Layout → Responsive & Motion → Architecture & Perf → Projects

Foundations & Layout · 1 — Style · ~12 min read · CSS — Layout Systems

1. Introduction

Today: Flexbox. Read the diagram, paste the CSS, then change one value and watch the UI update.

Flexbox lays out children in a row or column with flexible sizing. justify-content aligns main axis; align-items aligns cross axis; flex: 1 lets items grow.

2. Real-world story

Banking home shows four KPI cards that wrap on tablet.

Outcome: Flexbox replaces brittle width percentages.

3. Why it matters

StyleVerse card rows, form rows, and mobile nav bars use flex for equal-height columns without float clears.

4. Visual understanding

Read this diagram — the mental model for Flexbox.

flex container (display: flex)
┌──────┬──────┬──────┐
│ item │ item │ item │  → main axis (row)
└──────┴──────┴──────┘
justify-content (main) · align-items (cross)

5. Key concepts (easy words)

Idea	Meaning
What	Flexbox lays out children in a row or column with flexible sizing. justify-content aligns main axis; align-items aligns cross axis; flex: 1 lets items grow.
Remember	display: flex on container. justify-content and align-items control alignment. flex shorthand controls grow, shrink, basis.
Layout tip	Style the container first, then tune children.

6. How it works

kpi-row flex container wraps cards. Each kpi-card grows/shrinks with minimum 200px basis — responsive equal tiles.
display: flex on container.
justify-content and align-items control alignment.
Check the result in DevTools → Computed and the box model overlay.

7. Choose wisely

Option	Notes
Flexbox	1D rows/columns, navs, card rows
Grid	2D page frames, dashboards
Float	Legacy — prefer flex/grid

8. Try this example

Paste into a <style> block (or use Run Example). Refresh to see StyleVerse UI changes.

.kpi-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.kpi-card {
  flex: 1 1 200px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}

Line walkthrough

Code	What it means
`.kpi-row {`	Selector — picks which elements get these declarations.
`display: flex;`	Declaration — property and value that change appearance.
`gap: 16px;`	Declaration — property and value that change appearance.
`flex-wrap: wrap;`	Declaration — property and value that change appearance.
`}`	Ends the rule block.
`.kpi-card {`	Selector — picks which elements get these declarations.
`flex: 1 1 200px;`	Declaration — property and value that change appearance.
`padding: 20px;`	Declaration — property and value that change appearance.
`background: #fff;`	Declaration — property and value that change appearance.
`border-radius: 8px;`	Declaration — property and value that change appearance.

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

Result

9. Another real-world angle

10. Best practices checklist

Prefer classes over ids for reusable StyleVerse components.
Use design tokens (CSS variables) for color and spacing.
Mobile-first media queries; test keyboard focus.
Keep specificity low — avoid !important except rare overrides.
Animate transform/opacity when you can; respect prefers-reduced-motion.

11. Common mistakes

Using flex on wrong parent — only direct children become flex items.
Forgetting flex-shrink: 0 on icons that should not squash.

12. Practice in the browser

Add four divs with class kpi-card inside kpi-row.
Shrink viewport and watch wrap.
Set flex-direction: column on narrow breakpoint.
Use align-items: stretch for equal heights.

Experiments

Add justify-content: center when only two cards remain.
Set one card flex: 2 1 200px to make it wider.

13. FAQ

Where should I put CSS for Flexbox?

Start in a <style> block or styles.css linked from HTML. Later use CSS Modules, Tailwind, or tokens in a design system.

Why is my rule not applying?

Check selector match, typos, specificity, and whether a more specific rule or inline style wins. DevTools Computed tells the truth.

Flexbox or Grid for this?

Flex for one direction (toolbars, card rows). Grid for two-dimensional page frames. Many UIs use both.

14. Interview questions

Explain Flexbox simply.

Flexbox lays out children in a row or column with flexible sizing. justify-content aligns main axis; align-items aligns cross axis; flex: 1 lets items grow.