Let’s begin with Lecture 20 of the HTML5 & CSS3 series. Introduction to Flexbox – Easy Layouts in Rows and Columns. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand what Flexbox is and why it’s powerful
- Know how to create layouts using
display: flex - Be able to align items horizontally and vertically
- Build a responsive navigation bar and card layout with ease
- Say goodbye to float hacks and manual spacing!
💡 What is Flexbox?
Flexbox (short for Flexible Box Module) is a modern CSS layout system that makes it easy to design flexible and responsive layouts — even when the size of elements is unknown or dynamic.
Think of it like this:
If HTML elements are puzzle pieces, then Flexbox is your magic board that helps them fit together perfectly — whether in a row or column!
📦 Flexbox Terminology
There are two main parts to a Flexbox layout:
- Flex Container – The parent element that holds the children
- Flex Items – The child elements inside the container
Basic Setup:
.container {
display: flex;
}Now all direct children become flex items , arranged side by side by default.
🔧 Key Flexbox Properties
| Property | Purpose |
|---|---|
display: flex; | Turns an element into a flex container |
flex-direction | Sets direction:row,row-reverse,column,column-reverse |
justify-content | Aligns items along the main axis (left,center,right,space-between, etc.) |
align-items | Aligns items along the cross axis (top,center,bottom) |
gap | Adds space between flex items (no need for margins!) |
💻 Try This: Make a Responsive Navigation Bar with Flexbox
Let’s build a modern navigation bar without any floats — just pure Flexbox magic.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
flex-navbar.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Navbar</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
background-color: #333;
padding: 15px 20px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 15px;
}
.nav-links li {
display: inline-block;
}
.nav-links a {
color: white;
text-decoration: none;
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.nav-links a:hover {
background-color: #555;
}
</style>
</head>
<body>
<header class="navbar">
<div class="logo">MySite</div>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="contact-form.html">Contact</a></li>
<li><a href="my-favorites.html">Favorites</a></li>
<li><a href="game-scores.html">Game Scores</a></li>
</ul>
</header>
<main style="padding: 20px;">
<h1>Welcome to My Website</h1>
<p>This is a simple responsive navbar built using Flexbox!</p>
<p><a href="index.html">Back to Home</a></p>
</main>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve created a clean, modern, and fully responsive navigation bar using only Flexbox!
🧪 Try It Yourself!
- Change the
flex-directiontocolumnand see how the layout changes. - Center everything using
justify-content: centerandalign-items: center. - Add a search box input field inside the navbar and make it appear on the right.
- Use
gapto control spacing between links instead of margins.
🚀 Next Lecture Preview:
In Lecture 21, we’ll explore more Flexbox properties, including flex-wrap, order, flex-grow, and flex-shrink — so you can create complex layouts that adapt beautifully to different screen sizes!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share.
HTML5 and CSS3 Compleate Series
