Flexbox for rows and columns

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Flexbox for rows and columns—the ideas, syntax, and habits you need before moving on in HTML & CSS.

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

You will apply Flexbox for rows and columns in contexts like: Landing pages, dashboards, marketing sites, and portfolio pieces built without a framework.

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

When the previous lesson's MCQs feel easy and you can explain Flexbox for rows and columns in your own words.

After navigation bars, flex layouts power toolbars, card rows, and split panes. Think in main axis and cross axis terms.

Common recipes

Horizontal row: display: flex; gap: 1rem;
Centered cluster: justify-content: center; align-items: center;
Push footer down: column flex on body with main { flex: 1; }

Item properties

flex: 1 — grow to fill free space.
flex-shrink: 0 — prevent squashing icons.

Practice

Change flex-direction to column on .row.
Set one child to flex: 2 and others to flex: 1.

More flex lessons: CSS Flexbox topic.

Important interview questions and answers

Q: What is the flex main axis?
A: The direction flex items flow—row (horizontal) or column (vertical) depending on `flex-direction`.
Q: `align-items` vs `justify-content`?
A: `justify-content` aligns on the main axis; `align-items` on the cross axis.
Q: When does flex fail?
A: Complex two-dimensional page layouts are often clearer with Grid.

Playground

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

Discussion

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

Starter discussion topics

What part of this lesson needs a second read?
What would you try differently in a real project?

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