Frontend Master

JavaScript Curriculum

Flexbox
+65 XP

Flexbox

medium
~35 min·65 XP

The coffee shop page needs a proper navbar, a card grid, and a sidebar layout for the menu. Flexbox handles all three in fewer lines of code than you'd expect.

Flexbox

Flexbox (Flexible Box Layout) is a one-dimensional layout model — it arranges items in a row or column. It's the right tool for navbars, card rows, sidebars, centered content, and any layout where items need to grow, shrink, or align with each other.

The Container Properties

When you set display: flex on an element, its direct children become flex items. You control their arrangement from the container:

flex-container.css
flex-direction
justify-content
align-items
flex-wrap
items
1
2
3
4
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
}
💡The two axis mental model
Flexbox has two axes. The **main axis** runs in the flex-direction direction (row = horizontal, column = vertical). **justify-content** controls spacing along the main axis. The **cross axis** is perpendicular. **align-items** controls alignment on the cross axis. This distinction is the key to understanding every flex property.

Flex Item Properties

The power of Flexbox comes from controlling how individual items grow and shrink:

flex-items.css

All items flex-grow: 1 — they share available space equally.

Nav
Main
Aside
.nav {
  flex: 0 1 auto;
  /* flex-grow: 0  flex-shrink: 1  flex-basis: auto */
}
.main {
  flex: 1 1 auto;
  /* flex-grow: 1  flex-shrink: 1  flex-basis: auto */
}
.aside {
  flex: 0 1 auto;
  /* flex-grow: 0  flex-shrink: 1  flex-basis: auto */
}
ℹ️The flex shorthand
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. It means: grow to fill available space, shrink if needed, start from zero width. flex: 0 0 240px means: don't grow, don't shrink, stay exactly 240px. These two are the most common flex item declarations you'll write.

Real-World Flexbox Patterns

The same handful of patterns appear in almost every project:

flex-patterns.css

Logo left, links centre, CTA right — the universal nav layout.

Preview
☕ The Grind
MenuAboutContact
CSS
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
⚠️Flexbox vs Grid — when to use which
Use Flexbox for **one-dimensional** layouts — a row of items, a column of items, a navbar. Use CSS Grid (Lesson 15) for **two-dimensional** layouts — rows and columns simultaneously, like a full page layout or a photo grid. When in doubt: if you're thinking about one direction, use Flex. If you're thinking about both directions at once, use Grid.

Your Challenge

Build the coffee shop page layout using Flexbox — sticky header with logo and nav, two-column content area, and a card row.

Challenge

Build a full page layout using Flexbox: a header with logo left and nav right (justify-content: space-between), a main area with content and sidebar side by side (flex: 1 and flex: 0 0 240px), and a card row with flex-wrap: wrap and flex: 1 1 200px on each card.

flexboxdisplay-flexflex-directionjustify-contentalign-itemsflex-wrapgapflex-growflex-shrinkflex-basisflexorderalign-self
Flexbox | Nexus Learn