Flexbox
Align and distribute items along one axis with the layout model you will use every day.
What you will be able to do
- Create a flex container
- Control alignment on both axes
- Use gap instead of margin hacks
Flexbox is one-dimensional: items flow in a row or a column. It is ideal for toolbars, cards, navigation and centring.
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.grow {
flex: 1;
}Your turn
EasyCentre the hero content
Make .hero a flex container that centres its children both horizontally and vertically.
CSS · starter
.hero {
min-height: 320px;
/* your rules here */
}Check your understanding before moving on.
Knowledge checkQuestion 1
Which property centres items along the main axis of a row?
Select an answer to continue
Study tools
Make it yours.
Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.
Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign inFinished reading?
Lock in what you just learned.
0%
Mark this lesson complete to save your place and move one step closer to the certificate.