Flex Items

Last reviewed Jun 1, 2026 Content v20260601

This lesson

This lesson teaches Flex Items—the ideas, syntax, and habits you need before moving on in CSS.

Most modern layouts are built with flexbox and grid; skipping this lesson leaves responsive UI fragile.

You will apply Flex Items in contexts like: Page layouts, dashboards, marketing sections, and component libraries.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Flex item properties control how each child grows, shrinks, and occupies base space inside container constraints.

.sidebar { flex: 1; }\n.main { flex: 1; }

If you need fixed sidebar width, use .sidebar { flex: 0 0 16rem; } and let main flex.

Q: What does flex: 1 imply?
A: Item can grow and shrink with a zero-ish basis depending on shorthand expansion.
Q: Why set min-width: 0 on flex children?
A: Allows content to shrink instead of forcing overflow.
Q: When use align-self?
A: Override one item’s cross-axis alignment inside shared container rules.

Tip: Set display:flex on the parent; align/justify control children along axes.

Can you explain this lesson in 30 seconds without reading notes?

Self-reflection (saved on this device)

Not saved yet.

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Multiple choice — immediate feedback.

Learner essays linked to CSS — not official lesson content.

Browse all stories

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

No discussion yet. Be the first to ask a question.

Jump