Layout and responsiveness · Lesson 8 of 17
Flexbox
Line items up and spread them in two lines.
9 minutes3 games
Put display: flex on the parent and its children line up side by side. Then:
justify-contentspreads them along the main axis (center,space-between…).align-itemsaligns them on the cross axis.gapsets the space between them.flex-direction: columnstacks them vertically.
HTML
<style>
.nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px;
background: #111827;
}
.nav a { color: white; }
.logo { color: #22d3ee; font-weight: 700; }
</style>
<div class="nav">
<span class="logo">SeaCode</span>
<div><a href="#">Courses</a> · <a href="#">Login</a></div>
</div>Change space-between to center or flex-end and compare.
.row { flex-direction: row; justify-content: flex-start; align-items: stretch; }Change direction and alignment to see how the axes change.
Quick question
You want 3 cards centred horizontally. What do you put on the parent?
Complete the code
Stack the items vertically with an 8px gap.
.list { display: ; flex-direction: ; gap: 8px; }
Exercise
Make .row a flex container with centred items (justify-content: center).
HTML
<style>
.row {
}
</style>
<div class="row"><span>A</span><span>B</span><span>C</span></div>
Learn more from
Played 0 of 3 games
Sign in to save your progress and earn XP.