Loading...

CSS Flexbox

Page components sketched shells, bars, menus, and galleries. Flexbox is the modern way to line items up in one direction — a row or a column — with less float fuss. Turn on display: flex, meet flex items, then dive deeper in the next Flexbox lessons.

A Flexbox starter toolkit

📊 Flexbox at a glance

Idea Everyday job
Flex container Parent with display: flex (or inline-flex)
Flex items Direct children that participate in the flex layout
Main axis Primary direction items travel (row by default)
Cross axis The perpendicular direction for alignment
gap Built-in space between items
Next lessons Container props, item props, responsive flex patterns

Flexbox is strongest in one dimension. For full two-dimensional page grids, the Grid module comes after this Flexbox track.

Turn on a flex container

Set display: flex on the parent. Children become flex items and sit in a row by default.

Basic flex row

css 
.toolbar {
display: flex;
align-items: center;
}

.toolbar .btn {
padding: 0.5rem 0.75rem;
}

Gap instead of margin fights

gap spaces items without collapsing tricks. Prefer it for even gutters between flex children.

Flex gap

css 
.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}

Push items apart on the main axis

justify-content distributes free space along the main axis. space-between is a classic header pattern: brand left, actions right.

Space-between header

css 
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}

Center on the cross axis — and both

align-items: center lines items on the cross axis. Pair with justify for a calm centered cluster inside a box.

Centered flex cluster

css 
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
}

Wrap when the row runs out of room

flex-wrap: wrap lets items drop to the next line — you already peeked at this in the gallery. The Flex Responsive lesson will go further.

Flex wrap peek

css 
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

A calm Flexbox habit

Use Flexbox for one-dimensional rows and columns: navs, toolbars, card rows, centering. Learn container details next, then item growth/shrink, then responsive flex. Do not expect Flexbox alone to replace every Grid layout.

Named flex roles

css 
.cluster {
display: flex;
gap: 0.75rem;
align-items: center;
}

.cluster__main { /* grows later with flex item props */ }
.cluster__meta { /* stays compact */ }

Try it yourself

  1. Make a .toolbar with display: flex and three buttons.
  2. Add gap and align-items: center.
  3. Build a header with justify-content: space-between.
  4. Center a pair of buttons in a box with justify + align.
  5. Write which upcoming lesson will cover flex-grow / flex-basis ideas.

Common mistakes

  • Sprinkling display: flex on every wrapper without a layout goal
  • Expecting Flexbox to act like a full 2D Grid
  • Fighting spacing with random margins instead of gap
  • Skipping the next lessons and memorizing only this intro
  • Staying on float rows forever when a flex row is clearer

Summary

  • Flexbox lays out items along one main axis
  • display: flex creates a container; children are flex items
  • gap, justify-content, and align-items unlock everyday rows
  • Wrap peeks at responsive rows; more comes later
  • Container, item, and responsive Flexbox lessons deepen the model next

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 45 of 51
Css Tutorial