Simple Layout with Flexbox
Flexbox is the easiest way to place boxes side by side, and it finishes your personal page.
Turning on Flexbox
Add display: flex to a parent element. Its children then line up in a row.
Example
html
<!DOCTYPE html>
<html>
<head>
<style>
.row {
display: flex;
gap: 16px;
}
.row div {
background-color: #fde68a;
padding: 20px;
flex: 1;
}
</style>
</head>
<body>
<div class="row">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</body>
</html>| Property | Put on | What it does |
|---|---|---|
display: flex | Parent | Turns on Flexbox |
gap | Parent | Space between the children |
justify-content | Parent | Spreads children along the row (center, space-between) |
align-items | Parent | Lines them up vertically (center) |
flex-wrap: wrap | Parent | Lets children move to a new line when there is no room |
flex: 1 | Child | Children share the space equally |
A Simple Navigation Bar
Example
html
<nav class="menu">
<a href="#about">About</a>
<a href="#hobbies">Hobbies</a>
<a href="#contact">Contact</a>
</nav>Example
css
.menu {
display: flex;
justify-content: center;
gap: 20px;
}Working on Phones
On a narrow phone screen, three cards in a row become too thin. flex-wrap: wrap plus a minimum width lets them drop to a new line automatically.
Example
css
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 250px;
}flex: 1 1 250px means "start at 250px wide, grow to fill space, and shrink if needed". When the screen is narrower than two cards, they stack.
Always test your page on a phone. In Chrome, press F12 and click the phone icon to see how it looks on a small screen.
The Finished Page
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ayesha Khan</title>
<style>
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #fff8e7; line-height: 1.6; margin: 0; }
header { background: #f59e0b; color: white; text-align: center; padding: 24px 16px; }
header h1 { margin: 0; }
.menu { display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
.menu a { color: white; text-decoration: none; font-weight: bold; }
.cards { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; max-width: 900px; margin: 0 auto; }
.card { flex: 1 1 250px; background: white; padding: 16px 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.card h2 { margin-top: 0; color: #b45309; }
footer { text-align: center; padding: 16px; color: gray; }
</style>
</head>
<body>
<header>
<h1>Ayesha Khan</h1>
<p>Student and future web developer from Karachi</p>
<nav class="menu">
<a href="#about">About</a>
<a href="#hobbies">Hobbies</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main class="cards">
<section class="card" id="about">
<h2>About Me</h2>
<p>I study at a college in Gulshan and I am learning HTML and CSS.</p>
</section>
<section class="card" id="hobbies">
<h2>Hobbies</h2>
<ul>
<li>Drawing</li>
<li>Reading stories</li>
<li>Cricket</li>
</ul>
</section>
<section class="card" id="contact">
<h2>Contact</h2>
<p><a href="mailto:ayesha@example.com">ayesha@example.com</a></p>
</section>
</main>
<footer>Made by Ayesha, 2026</footer>
</body>
</html>Make the result window narrower and watch the cards stack. Your personal page is done!
Exercise
Exercise
Which property makes flex items move to a new line when the screen is too narrow?