Skip to content
Learn Netverks

Lesson

Step 9/36 25% through track

flex-utilities

Flex utilities

Last reviewed Jun 1, 2026 Content v20260601
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
intermediate

This lesson

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

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

You will apply Flex utilities 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.

When the previous lesson's MCQs feel easy and you can explain Flex utilities in your own words.

Bootstrap exposes flex helpers that mirror CSS flexbox: d-flex, flex-column, justify-content-between, align-items-center, and gap-* (Bootstrap 5.1+).

Common patterns

  • Toolbar: d-flex justify-content-between align-items-center
  • Stacked mobile / row desktop: combine with responsive display (d-md-flex)
  • Equal-height cards: d-flex flex-column h-100 on card innards

Tailwind names the same ideas without the d- prefix (flex justify-between). Bootstrap flex utilities complement the grid—use flex for one-dimensional toolbars, grid for page-level columns.

Important interview questions and answers

  1. Q: Flex utilities or grid for a page shell?
    A: Grid (.row / .col) for main layout columns; flex for nav bars, media rows, and inline control groups.
  2. Q: Why gap-* over margin on every child?
    A: Gap spaces between items only—no first/last edge hacks, same rationale as Tailwind’s gap-4.

Self-check

  1. Which utilities center content on both axes inside a flex container?
  2. When would you use flex-column on a toolbar?

Interview tip Lesson completion confidence

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

Not saved yet.

Playground

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

Check yourself

Multiple choice — immediate feedback.

Discussion

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

Starter discussion topics

  • When use flex utils vs grid columns?
  • Which justify-content fits a toolbar?

Sign up or log in to post comments and sync lesson progress across devices.

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

Jump

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36