COURSE: WEBSITE 101

Lesson 3 — Layout with Flexbox

Beginner / Free Track

// 01. The Problem Flexbox Solves

By default, block elements stack vertically. Flexbox lets you arrange elements side by side, space them evenly, and align them precisely — in one line of CSS.

Apply display: flex; to a parent container. All direct children instantly become flexible items you can position and align.

// 02. The Key Properties

flex-direction — sets the direction. row = horizontal. column = vertical.

justify-content — aligns along the main axis. Try space-between, center, flex-end.

align-items — aligns along the cross axis. Try center, flex-start, stretch.

gap — space between items. Cleaner than margins.

// 03. A Real Page Layout

Here is a full page structure — header, main content, footer — using flexbox to fill the viewport height.

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header, footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

main {
    flex: 1;
    padding: 2rem;
}

[TRY IT NOW]

Add a <header>, <main>, and <footer> to your HTML. Wrap them in a <div class="page">. Apply the CSS above. Your page now has a real layout. Open DevTools and resize the window — watch it hold.

< Lesson 2: CSS Foundations Lesson 4: JavaScript >