Flex Items

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

📌 Covered in this chapter: flex-grow · flex-shrink · flex-basis · flex shorthand · align-self · order · Flexible Cards · Equal Height · Centering · Wrapping · Common Mistakes · Debugging

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

1flex-grow, flex-shrink, flex-basis

CSS▶ Try in Editor

.sidebar { flex: 0 0 240px; }    /* don't grow, don't shrink, 240px basis */
.main { flex: 1 1 auto; }       /* grow to fill remaining space */
.card { flex: 1 1 300px; }       /* flexible cards, min ~300px */

flex: 1 shorthand = flex: 1 1 0% — equal distribution.

2align-self, order & Centering

CSS — Perfect Center

.center-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.item-first { order: -1; }
.item-center { align-self: center; }

3Equal-Height Layouts & Common Mistakes

⚠️ Common Flex Mistakes

align-items: center on parent — children stretch avvavu, equal height lost
Forgetting min-width: 0 on flex children — text overflow issues
Using margins instead of gap for spacing
order abuse — visual order DOM order nundi different, accessibility problem

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