Flexbox

Learning objectives#

• Create a flex container
• Explain the main axis and cross axis
• Align items with justify-content and align-items
• Control sizing with flex-grow, flex-shrink and flex-basis

Explanation#

Set display: flex on a parent and its direct children become flex items laid out along the main axis (a row by default).

justify-content distributes items along the main axis. align-items aligns them on the cross axis (vertically, for a row).

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0 — the item grows to fill free space equally with its siblings.

Visual explanation#

Syntax#

1.container {
2  display: flex;
3  flex-direction: row;          /* or column */
4  justify-content: space-between;
5  align-items: center;
6  gap: 16px;
7  flex-wrap: wrap;
8}
9.item { flex: 1 1 200px; }

Code example: A responsive navigation bar#

1<style>
2  nav { display:flex; align-items:center; gap:16px; padding:12px 16px; background:#1e1b4b; font-family:sans-serif; }
3  .logo { color:#fff; font-weight:700; margin-right:auto; }
4  nav a { color:#c7d2fe; text-decoration:none; }
5  .btn { background:#2dd4bf; color:#042f2e; padding:6px 12px; border-radius:8px; }
6</style>
7<nav>
8  <span class="logo">Techie Babaji</span>
9  <a href="#">Tutorials</a>
10  <a href="#">Projects</a>
11  <a class="btn" href="#">Start</a>
12</nav>

The logo sits on the left; the links and the button are grouped on the right, vertically centred.

Step-by-step explanation#

1. display: flex turns <nav> into a flex container; the logo and links become flex items in a row.
2. align-items: center centres all items vertically.
3. gap: 16px adds consistent spacing between items without margins.
4. margin-right: auto on the logo absorbs all free space, pushing the remaining items to the right.

Real-world use case#

Common mistakes#

Best practices#

• Use gap instead of margins between items
• Use flex-wrap: wrap with a flex-basis for simple responsive rows
• Use margin-left: auto to push items apart
• Reach for Grid when you need alignment in two dimensions

Remember this#

Practice exercise#

1.container { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
2.box { width: 200px; height: 200px; }

Mini quiz#

Want more? Practise all CSS MCQs · CSS interview questions

Related topics#

My notes#

Saved in this browser.