CSS Flexbox: Modern Layout Control

Flexbox is a modern and efficient method for creating responsive layouts in CSS. Unlike classic techniques, Flexbox provides control over both the main and cross axes, precise alignment, and automatic space distribution. In this tutorial, we'll explore step by step how Flexbox works and how we can use it in real projects.

1. display

Activates Flexbox mode on a container.

display: flex – activates Flexbox on the current element
display: inline-flex – activates Flexbox, but the container behaves like an inline element

🔧 Live Example

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

.container {
  display: flex;
  background: #eee;
  padding: 20px;
}

.box {
  background: #4a90e2;
  color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
}

2. flex-direction

Controls the direction in which elements are arranged inside the container.

row – horizontal, from left to right (default)
row-reverse – horizontal, from right to left
column – vertical, from top to bottom
column-reverse – vertical, from bottom to top

🔧 Live Example

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.container {
  display: flex;
  flex-direction: row-reverse; /* change between row, row-reverse, column, column-reverse */
  background: #f0f0f0;
  padding: 20px;
  height: 200px;
}

.box {
  background: #007bff;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  border-radius: 6px;
}

3. justify-content

Controls the distribution of elements along the main axis (horizontal if flex-direction: row, vertical if flex-direction: column).

flex-start – aligns items at the start of the axis
flex-end – aligns items at the end of the axis
center – centers the items
space-between – equal space between items, no space at edges
space-around – equal space around each item
space-evenly – equal space between items and container edges

🔧 Live Example

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

.container {
  display: flex;
  justify-content: space-evenly; /* change between flex-start, flex-end, center, space-between, space-around, space-evenly */
  background: #f0f0f0;
  padding: 20px;
}

.box {
  background: #28a745;
  color: white;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}

4. align-items

Controls the alignment of items along the cross axis (vertical if flex-direction: row, horizontal if flex-direction: column).

stretch – items stretch to fill the cross axis (default)
flex-start – aligns items at the start of the cross axis
flex-end – aligns items at the end of the cross axis
center – centers items along the cross axis
baseline – aligns items based on the text baseline

🔧 Live Example

<div class="container">
  <div class="box">Short</div>
  <div class="box tall">Tall</div>
  <div class="box">Mid</div>
</div>

.container {
  display: flex;
  align-items: flex-end; /* change between stretch, flex-start, flex-end, center, baseline */
  background: #fff3cd;
  padding: 20px;
  height: 200px;
}

.box {
  background: #ffc107;
  color: black;
  padding: 10px;
  margin: 5px;
  border-radius: 6px;
}

.tall {
  height: 100px;
}

5. flex-wrap

Controls whether the items in the container wrap onto multiple lines when there's no more space on the main axis.

nowrap – all items stay on a single line (default)
wrap – items wrap onto new lines when space runs out
wrap-reverse – like wrap, but the lines are reversed

🔧 Live Example

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap; /* change between nowrap, wrap, wrap-reverse */
  background: #e0f7fa;
  padding: 10px;
  width: 300px;
}

.box {
  background: #00acc1;
  color: white;
  padding: 20px;
  margin: 5px;
  width: 120px;
  text-align: center;
  border-radius: 6px;
}

6. align-content

Controls the alignment of multiple lines along the cross axis, but only works when there are multiple rows (so flex-wrap must be active).

flex-start – lines are aligned at the start of the cross axis
flex-end – lines are aligned at the end of the cross axis
center – lines are centered
space-between – equal space between lines
space-around – equal space around each line
stretch – lines stretch to fill the cross axis (default)

🔧 Live Example

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* change between flex-start, flex-end, center, space-between, space-around, stretch */
  background: #f3e5f5;
  padding: 10px;
  height: 300px;
}

.box {
  background: #9c27b0;
  color: white;
  padding: 20px;
  margin: 5px;
  width: 100px;
  text-align: center;
  border-radius: 6px;
}

7. order

Controls the display order of elements in a Flexbox container without changing their order in the HTML.

order: 0 – default value
order: <number> – the smaller the number, the earlier the element appears

🔧 Live Example

<div class="container">
  <div class="box" style="order: 2;">First in HTML</div>
  <div class="box" style="order: 1;">Second in HTML</div>
  <div class="box" style="order: 0;">Third in HTML</div>
</div>

.container {
  display: flex;
  gap: 10px;
  background: #e8f5e9;
  padding: 20px;
}

.box {
  background: #66bb6a;
  color: white;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}

8. flex-grow

Controls how much an element can grow to occupy the available space in the container.

flex-grow: 0 – the element does not grow (default)
flex-grow: 1 – the element grows proportionally with the available space
flex-grow: >1 – the element grows more than the others

🔧 Live Example

<div class="container">
  <div class="box" style="flex-grow: 1;">Grow 1</div>
  <div class="box" style="flex-grow: 2;">Grow 2</div>
  <div class="box" style="flex-grow: 3;">Grow 3</div>
</div>

.container {
  display: flex;
  background: #fffde7;
  padding: 20px;
}

.box {
  background: #fbc02d;
  color: black;
  padding: 20px;
  margin: 5px;
  text-align: center;
  border-radius: 6px;
}

9. flex-shrink

Controls how much an element shrinks when space is limited.

flex-shrink: 1 – the element shrinks proportionally (default)
flex-shrink: 0 – the element does not shrink
flex-shrink: >1 – the element shrinks more aggressively

🔧 Live Example

<div class="container">
  <div class="box" style="flex-shrink: 1;">Shrink 1</div>
  <div class="box" style="flex-shrink: 0;">Shrink 0</div>
  <div class="box" style="flex-shrink: 2;">Shrink 2</div>
</div>

.container {
  display: flex;
  width: 300px;
  background: #fce4ec;
  padding: 10px;
}

.box {
  background: #ec407a;
  color: white;
  padding: 20px;
  width: 150px;
  margin: 5px;
  text-align: center;
  border-radius: 6px;
}

10. flex-basis

Defines the base size of an element before the available space is distributed. It's similar to width, but works within the Flexbox context.

auto – uses the size defined by content or width
<length> – e.g. flex-basis: 200px, sets a fixed size
0 – ignores the natural size and distributes space based on flex-grow

🔧 Live Example

<div class="container">
  <div class="box" style="flex-basis: 100px;">100px</div>
  <div class="box" style="flex-basis: 200px;">200px</div>
  <div class="box" style="flex-basis: 0;">0</div>
</div>

.container {
  display: flex;
  background: #e3f2fd;
  padding: 20px;
}

.box {
  background: #2196f3;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  border-radius: 6px;
}

11. flex (shorthand)

This is a shorthand for flex-grow, flex-shrink, and flex-basis.

flex: 1 – equivalent to flex-grow: 1; flex-shrink: 1; flex-basis: 0%
flex: 0 1 auto – default value
flex: <grow> <shrink> <basis> – e.g. flex: 2 0 150px

🔧 Live Example

<div class="container">
  <div class="box" style="flex: 1;">flex: 1</div>
  <div class="box" style="flex: 2;">flex: 2</div>
  <div class="box" style="flex: 3;">flex: 3</div>
</div>

.container {
  display: flex;
  background: #f1f8e9;
  padding: 20px;
}

.box {
  background: #8bc34a;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  border-radius: 6px;
}

12. align-self

Allows an element to control its own alignment along the cross axis, overriding the container's align-items.

auto – inherits the value from align-items
flex-start – aligns at the start of the cross axis
flex-end – aligns at the end of the cross axis
center – centered along the cross axis
baseline – aligns based on the text baseline
stretch – stretches to fill the cross axis (default)

🔧 Live Example

<div class="container">
  <div class="box" style="align-self: flex-start;">Start</div>
  <div class="box" style="align-self: center;">Center</div>
  <div class="box" style="align-self: flex-end;">End</div>
</div>

.container {
  display: flex;
  align-items: stretch;
  background: #ede7f6;
  padding: 20px;
  height: 200px;
}

.box {
  background: #673ab7;
  color: white;
  padding: 20px;
  margin: 5px;
  border-radius: 6px;
}

Flexbox Cheat Sheet

Property	Values	Description
`display`	flex, inline-flex	Activates Flexbox mode
`flex-direction`	row, row-reverse, column, column-reverse	Direction of items in the container
`justify-content`	flex-start, flex-end, center, space-between, space-around, space-evenly	Alignment on the main axis
`align-items`	stretch, flex-start, flex-end, center, baseline	Alignment on the cross axis
`flex-wrap`	nowrap, wrap, wrap-reverse	Wrapping items onto multiple lines
`align-content`	flex-start, flex-end, center, space-between, space-around, stretch	Alignment of multiple lines
`order`	0, 1, 2, ...	Display order
`flex-grow`	0, 1, 2, ...	Growth based on available space
`flex-shrink`	0, 1, 2, ...	Shrinkage when space is limited
`flex-basis`	auto, 0, px, %	Base size
`flex`	shorthand: grow shrink basis	Shorthand for the three above
`align-self`	auto, flex-start, flex-end, center, baseline, stretch	Individual alignment on the cross axis

Example: Responsive Card Layout

A card layout that automatically adapts to the screen size using flex-wrap and flex-basis.

🔧 Live Example

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background: #f5f5f5;
}

.card {
  flex: 1 1 200px;
  background: #03a9f4;
  color: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

Example: Navbar with Flexbox

A simple horizontally aligned navbar with a logo on the left and links on the right, using display: flex and justify-content: space-between.

🔧 Live Example

<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="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #222;
  padding: 15px 30px;
  color: white;
}

.logo {
  font-size: 1.5em;
  font-weight: bold;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.nav-links a:hover {
  text-decoration: underline;
}

Complete Layout for a Mini Site

A solid example of web structure — with header, navigation, sidebar, main content, and footer — built with clean HTML and CSS. Ideal for simple projects, dashboards, or personal websites. Everything is modular and easy to extend with PHP, JS, or modern frameworks.

Complete layout with logo and menu

<header class="site-header">
  <div class="logo">LOGO</div>
  <nav class="main-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<div class="page-layout">
  <aside class="sidebar">
    <h3>Useful Links</h3>
    <ul>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages</a></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">Statistics</a></li>
    </ul>
  </aside>

  <main class="content">
    <h2>Welcome!</h2>
    <p>This is the main content area. You can add articles, images, forms, or anything else.</p>
    <section>
      <h3>Special Section</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
    </section>
  </main>
</div>

<footer class="site-footer">
  <p>&copy; 2025 Demo Site. All rights reserved.</p>
</footer>

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f4f4f4;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #263238;
  color: white;
  padding: 15px 30px;
}

.logo {
  font-size: 1.5em;
  font-weight: bold;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: white;
  text-decoration: none;
}

.page-layout {
  display: flex;
  min-height: 80vh;
}

.sidebar {
  width: 250px;
  background: #9fa6a9ff;
  color: white;
  padding: 20px;
}

.sidebar h3 {
  margin-top: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar a {
  color: white;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
}

.content {
  flex-grow: 1;
  padding: 30px;
  background: white;
}

.site-footer {
  background: #263238;
  color: white;
  text-align: center;
  padding: 15px;
}

Flexbox gave you control over horizontal and vertical alignment, but if you want to orchestrate complex layouts like a web architect, it's time to move on to CSS Grid — where every row and column is under your command. Let's get started.

🧠 Quiz – CSS Flexbox: Modern Layout Control

CSS Grid ➔