70 Mins upper-intermediate
12. CSS Flexbox
CSS Layouts
CSS Flexbox
Flexbox is the most powerful tool for aligning elements in a row or column. Before 2015, centering a div was genuinely difficult. With Flexbox, it takes 3 lines of CSS.
⚡ Activating Flexbox
Apply display: flex to a parent element. Its direct children automatically arrange themselves in a row:
<style>
.flex-container {
display: flex;
background: #1a1a2e;
padding: 10px;
gap: 10px;
}
.flex-item {
background: #00A3FF;
color: white;
padding: 15px 20px;
border-radius: 6px;
font-family: sans-serif;
font-weight: bold;
}
</style>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
🧭 justify-content — Horizontal Alignment
<style>
.row { display:flex; background:#f0f0f0; padding:8px; margin:5px 0; gap:8px; }
.item { background:#4FC3F7; color:white; padding:8px 14px; border-radius:4px; font-family:sans-serif; font-size:13px; }
.label { font-family:sans-serif; font-size:11px; color:#666; margin-bottom:2px; }
</style>
<div class="label">justify-content: flex-start (default)</div>
<div class="row" style="justify-content:flex-start"><div class="item">A</div><div class="item">B</div><div class="item">C</div></div>
<div class="label">justify-content: center</div>
<div class="row" style="justify-content:center"><div class="item">A</div><div class="item">B</div><div class="item">C</div></div>
<div class="label">justify-content: space-between</div>
<div class="row" style="justify-content:space-between"><div class="item">A</div><div class="item">B</div><div class="item">C</div></div>
<div class="label">justify-content: space-around</div>
<div class="row" style="justify-content:space-around"><div class="item">A</div><div class="item">B</div><div class="item">C</div></div>
🎯 The Famous Centering Solution
<style>
.centered-box {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 8px;
}
.centered-box span {
color: white;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
}
</style>
<div class="centered-box">
<span>Perfectly Centered!</span>
</div>
🃏 Flexbox Navbar
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
display: flex;
justify-content: space-between;
align-items: center;
background: #0f0f1a;
padding: 0 24px;
height: 60px;
}
.logo { color: #00A3FF; font-family: sans-serif; font-weight: 900; font-size: 20px; }
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a { color: #aaa; font-family: sans-serif; font-size: 14px; text-decoration: none; }
.nav-links a:hover { color: white; }
.cta-btn { background: #00A3FF; color: white; border: none; padding: 8px 18px; border-radius: 6px; font-family: sans-serif; font-weight: bold; cursor: pointer; }
</style>
<nav>
<div class="logo">VoidX</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Pricing</a></li>
</ul>
<button class="cta-btn">Get Started</button>
</nav>
Knowledge Check
Ready to test your understanding of 12. CSS Flexbox?