CSS - Flexbox

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 20–30 minutes

Flexbox provides one-dimensional layout for distributing space and aligning items, ideal for toolbars, cards, and forms.

Learning Objectives

• Configure containers with direction, wrapping, gaps, and alignment.
• Control item sizes and alignment with flex and align-self.

Details & Examples

• Container: display:flex, flex-direction, flex-wrap, gap, justify-content, align-items
• Items: flex (shorthand for grow/shrink/basis), align-self, order

.toolbar{ display:flex; gap:.5rem; justify-content:space-between; align-items:center; }
.card-row{ display:flex; flex-wrap:wrap; gap:1rem; }
.card{ flex: 1 1 220px; }

Try it

Common Patterns

• Centering: display:flex; align-items:center; justify-content:center;
• Sticky footer: make main wrapper flex with min-height:100vh

Checks for Understanding

1. What does flex: 1 0 200px mean?

Exercises

1. Build a responsive toolbar with space-between alignment and a center group that grows to fill available room.
2. Create a wrapping card row where items have flex: 1 1 240px, and verify the layout at 360px, 768px, and 1200px widths.