Flexbox

Flexbox makes 1-D layout (a row or a column) intuitive. Master the container and item properties and you will solve 80% of layout problems.

Flexboxlayoutresponsive

Duration

⏱ About 2 hours

Level

📊 Beginner

Prerequisite

🎯 css-03

OUTCOME

Build navbars, card lists, and centered hero sections with one technique

What you'll learn

1Understand the main axis and cross axis
2Use justify-content and align-items correctly
3Control wrapping with flex-wrap and gap
4Distribute space with flex-grow / shrink / basis

1. Make a Container Flex

css

.navbar {
  display: flex;
  justify-content: space-between; /* main axis */
  align-items: center;            /* cross axis */
  gap: 16px;
  padding: 12px 24px;
}

display: flex turns the element into a flex container. Direct children become flex items.

2. Container Properties

Property	Values
flex-direction	row \| column \| row-reverse \| column-reverse
justify-content	start \| end \| center \| space-between \| space-around \| space-evenly
align-items	stretch (default) \| start \| center \| end \| baseline
flex-wrap	nowrap (default) \| wrap \| wrap-reverse
gap	Space between items (no margins needed)

3. Item Properties

css

.sidebar { flex: 0 0 240px; }   /* fixed width: 240px */
.main    { flex: 1; }            /* fill remaining */
.card    { flex: 1 1 280px; }    /* grow, shrink, min 280 */

flex: grow shrink basis. grow=1 means "take a share of leftover space".

4. Common Patterns

css

/* Perfect centering */
.center { display: flex; justify-content: center; align-items: center; min-height: 100vh; }

/* Card grid that wraps */
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.cards > .card { flex: 1 1 240px; }

/* Sticky footer */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.app > main { flex: 1; }

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗