📦 Flexbox Layout

Flexbox (Flexible Box Layout) is a powerful CSS layout system for arranging elements in rows or columns. It makes creating responsive layouts much easier than older methods.

🎮 Learn by Playing

Check out Flexbox Froggy - a fun game that teaches Flexbox concepts interactively!

The Flexbox Concept

Flexbox works with two types of elements:

Flex Container: The parent element with display: flex
Flex Items: The direct children of the flex container

Basic Structure

<!-- Flex Container -->
<div class="container">

  <!-- Flex Items -->
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>

</div>

/* Turn the container into a flex container */
.container {
  display: flex;
}

Flex Container Properties

These properties go on the flex container (parent):

1. flex-direction

Defines the main axis direction (row or column):

Value	Description
`row` (default)	Items arranged horizontally (left to right)
`row-reverse`	Items arranged horizontally (right to left)
`column`	Items arranged vertically (top to bottom)
`column-reverse`	Items arranged vertically (bottom to top)

/* Horizontal layout (default) */
.container {
  display: flex;
  flex-direction: row;
}

/* Vertical layout */
.container {
  display: flex;
  flex-direction: column;
}

Live Example: flex-direction: row

Live Example: flex-direction: column

2. justify-content

Aligns items along the main axis (horizontal if row, vertical if column):

Value	Description
`flex-start`	Items at the start
`flex-end`	Items at the end
`center`	Items centered
`space-between`	Space between items, no space at edges
`space-around`	Equal space around each item
`space-evenly`	Equal space between all items including edges

justify-content: center

justify-content: space-between

justify-content: space-evenly

3. align-items

Aligns items along the cross axis (vertical if row, horizontal if column):

Value	Description
`stretch` (default)	Items stretch to fill container
`flex-start`	Items at the start
`flex-end`	Items at the end
`center`	Items centered
`baseline`	Items aligned by text baseline

align-items: center

4. flex-wrap

Controls whether items wrap to new lines when they don't fit:

/* Items stay on one line (may overflow) */
.container {
  flex-wrap: nowrap; /* default */
}

/* Items wrap to new lines if needed */
.container {
  flex-wrap: wrap;
}

flex-wrap: wrap

5. gap

Creates space between flex items (modern browsers only):

.container {
  display: flex;
  gap: 20px; /* Space between items */
}

/* Separate row and column gaps */
.container {
  row-gap: 20px;
  column-gap: 10px;
}

Flex Item Properties

These properties go on the flex items (children):

1. flex-grow

Defines how much an item should grow relative to other items:

.item-1 {
  flex-grow: 1; /* Takes 1 part of available space */
}

.item-2 {
  flex-grow: 2; /* Takes 2 parts (twice as much as item-1) */
}

flex-grow example

flex-grow: 1

flex-grow: 2

flex-grow: 1

2. flex-shrink

Defines how much an item should shrink if there's not enough space:

.item {
  flex-shrink: 1; /* Can shrink (default) */
}

.no-shrink {
  flex-shrink: 0; /* Won't shrink */
}

3. flex-basis

Defines the initial size of an item before growing or shrinking:

.item {
  flex-basis: 200px; /* Start at 200px wide */
}

.item {
  flex-basis: 30%; /* Start at 30% of container */
}

4. flex (Shorthand)

Combines flex-grow, flex-shrink, and flex-basis:

/* flex: [grow] [shrink] [basis] */
.item {
  flex: 1 1 200px;
}

/* Common patterns */
.item {
  flex: 1; /* flex: 1 1 0 - grow and shrink equally */
}

.item {
  flex: 0 0 200px; /* Fixed width, no grow/shrink */
}

5. align-self

Overrides align-items for individual items:

.special-item {
  align-self: flex-end; /* This item aligns to bottom */
}

Common Flexbox Patterns

Centering Content

Perfect centering (horizontally and vertically):

.centered {
  display: flex;
  justify-content: center; /* Horizontal center */
  align-items: center;     /* Vertical center */
  min-height: 300px;
}

Perfectly Centered!

Navigation Bar

HTML

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: space-between; /* Logo left, links right */
  align-items: center;
  padding: 1rem;
  background: #333;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

Card Grid

.card-container {
  display: flex;
  flex-wrap: wrap;           /* Wrap to new lines */
  gap: 20px;
}

.card {
  flex: 1 1 300px;          /* Grow, shrink, min 300px */
  padding: 20px;
  background: white;
  border-radius: 8px;
}

Holy Grail Layout

Classic layout with header, footer, main content, and two sidebars:

HTML

<div class="container">
  <header>Header</header>
  <div class="content">
    <aside class="sidebar">Left Sidebar</aside>
    <main>Main Content</main>
    <aside class="sidebar">Right Sidebar</aside>
  </div>
  <footer>Footer</footer>
</div>

CSS

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

.content {
  display: flex;
  flex: 1; /* Takes remaining space */
}

main {
  flex: 1; /* Main content grows */
}

.sidebar {
  flex: 0 0 200px; /* Fixed 200px width */
}

Browser Support

✅ Excellent Browser Support

Flexbox is supported in all modern browsers (Chrome, Firefox, Safari, Edge). For older browsers (IE 10-11), use vendor prefixes or fallback layouts.

Quick Reference

Property	Applied To	Common Values
`display`	Container	`flex`
`flex-direction`	Container	`row`, `column`
`justify-content`	Container	`center`, `space-between`
`align-items`	Container	`center`, `stretch`
`flex-wrap`	Container	`wrap`, `nowrap`
`gap`	Container	`20px`, `1rem`
`flex`	Item	`1`, `1 1 200px`
`align-self`	Item	`center`, `flex-end`

Summary

📚 What you learned

Flexbox creates flexible, responsive layouts
Container properties: flex-direction, justify-content, align-items, flex-wrap, gap
Item properties: flex-grow, flex-shrink, flex-basis, flex shorthand
Common patterns: centering, navigation bars, card grids
Flexbox is fully supported in modern browsers

🎮 Practice Time!

Don't forget to play Flexbox Froggy to master these concepts through practice!