CSS Flexbox: The Modern Layout Module

Discover the power of Flexbox to effortlessly align, distribute, and re-order elements in your webpage for any screen size.

Lesson ProgressStep 1 of 9
⭐ 0 EXP

Hello! Let's build a modern layout. We'll start with three simple boxes, side-by-side.

.item { 
  width: 60px; 
  height: 60px; 
}

The Flex Container

The journey into Flexbox begins with the parent element, the flex container. To activate the flexbox layout model, you simply set the container's display property to flex.

.container {
  display: flex;
}

As soon as you do this, all **direct children** of that container become flex items. By default, they will all try to align themselves in a single horizontal row.

System Check

Which CSS property and value are used to create a flex container?

Advanced Holo-Simulations

⭐ 0 EXP

Log in to unlock these advanced training modules and test your skills.

Achievements

🏆
Flex Master

Master the `display: flex` property.

🏗️
Alignment Architect

Correctly align items with `justify-content` and `align-items`.

✍️
Responsive Whiz

Use `flex-wrap` and `flex-grow` for responsive layouts.

Mission: Perfectly Center the Items

Add the correct properties to the `.container` rule to center the items both horizontally and vertically.

A.D.A. Feedback:

> System integrity looks stable. Code is valid.

Challenge: Order the Properties

Drag the CSS properties into the most logical order for a centering layout.

justify-content: center;
display: flex;
align-items: center;

Challenge: Complete the `flex` Shorthand

Fill in the missing values for `flex-grow`, `flex-shrink`, and `flex-basis` (the most common combination).

.item { flex:; }

Consult A.D.A.

Community Holo-Net

Peer Project Review

Submit your "Centered Layout" project for feedback from other Net-Runners.

Support Us

Flexbox: The Complete Guide to Modern CSS Layouts

For decades, CSS layout was a source of frustration for web developers, relying on hacks like floats and table-based structures. Then came Flexbox, a one-dimensional layout model that fundamentally changed how we build user interfaces. It provides a simple, powerful, and (as the name implies) flexible way to arrange, align, and distribute space among items in a container.

The Two Core Concepts: Container & Items

The Flexbox model is built on a parent-child relationship.

  • The Flex Container: This is the parent element where you "turn on" flexbox by setting its CSS property to display: flex;.
  • Flex Items: These are the **direct children** of the flex container. They are the elements that get arranged by the flexbox properties.

The Main Axis vs. The Cross Axis

This is the single most important concept to grasp. Unlike block layouts (always vertical) or inline layouts (always horizontal), Flexbox is **axis-aware**.

  • Main Axis: This is the primary direction your items are laid out. By default, it's horizontal (left-to-right).
  • Cross Axis: This is the axis perpendicular to the main axis. By default, it's vertical (top-to-bottom).

Crucially, these axes can be swapped!

Properties for the Flex Container (The Parent)

1. `flex-direction`

This property defines the main axis, establishing the direction items are placed.

  • row (default): Items flow left-to-right.
  • row-reverse: Items flow right-to-left.
  • column: Items stack top-to-bottom. **This swaps the axes!** The main axis is now vertical, and the cross axis is horizontal.
  • column-reverse: Items stack bottom-to-top.

2. `justify-content`

This aligns items along the main axis. Think of it as distributing empty space.

  • flex-start (default): Packs items at the start of the axis.
  • flex-end: Packs items at the end of the axis.
  • center: Centers items along the axis.
  • space-between: Distributes items evenly; the first item is at the start, the last at the end.
  • space-around: Distributes items with equal space around them (including half-space at the ends).
  • space-evenly: Distributes items with equal space between them and at the ends.

3. `align-items`

This aligns items along the cross axis.

  • stretch (default): Stretches items to fill the container's height (or width, if `flex-direction: column`).
  • flex-start: Aligns items to the start of the cross axis.
  • flex-end: Aligns items to the end of the cross axis.
  • center: Centers items on the cross axis.
  • baseline: Aligns items based on their text's baseline.

4. `flex-wrap`

By default, flex items try to fit on one line. This property allows them to wrap.

  • nowrap (default): All items stay on one line (may cause overflow).
  • wrap: Items will wrap onto multiple lines, from top to bottom.
  • wrap-reverse: Items wrap onto multiple lines from bottom to top.

5. `align-content`

This property is often confused with `align-items`. `align-content` only works when there are **multiple lines** (i.e., `flex-wrap: wrap` is set). It aligns the *lines themselves* within the container.

Properties for Flex Items (The Children)

1. `flex-grow`

A unitless value that dictates how much an item can grow to fill available space. A value of `1` means "take up an equal share of the extra space." A value of `2` would take twice as much as an item with `1`.

2. `flex-shrink`

The opposite of `flex-grow`. It dictates how much an item can shrink if there isn't enough space. The default is `1`.

3. `flex-basis`

This defines the default size of an item *before* any growing or shrinking occurs. It's often better than `width` in a flex context.

4. `flex` (Shorthand)

This is the shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`. It's highly recommended.

  • flex: 0 1 auto; (default): Won't grow, will shrink, has automatic size.
  • flex: 1; (common): Shorthand for `flex: 1 1 0;`. It means "grow to fill space."
  • flex: auto;: Shorthand for `flex: 1 1 auto;`.
  • flex: none;: Shorthand for `flex: 0 0 auto;`. Won't grow or shrink.

5. `align-self`

This allows a single item to override the container's `align-items` property.

Key Takeaway: Start by setting display: flex on the container. Use flex-direction to set your main axis. Use justify-content to align on that axis and align-items to align on the cross axis. Use flex-grow on items to create responsive, space-filling layouts.

CSS Flexbox Glossary

Flex Container
The parent element on which `display: flex` or `display: inline-flex` is applied. It becomes the containing block for its direct children (flex items).
Flex Item
A direct child of a flex container. These are the elements that are laid out using the flexbox properties.
Main Axis
The primary axis along which flex items are laid out. It is defined by the `flex-direction` property. By default (`flex-direction: row`), it is horizontal.
Cross Axis
The axis perpendicular to the main axis. If the main axis is horizontal, the cross axis is vertical, and vice-versa.
`display: flex`
The CSS property that activates the flexbox layout model on an element, turning it into a block-level flex container.
`flex-direction`
A container property that establishes the main axis. Values include `row` (default), `row-reverse`, `column`, and `column-reverse`.
`justify-content`
A container property that defines how flex items are aligned along the **main axis**. It manages the distribution of empty space. Common values: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`.
`align-items`
A container property that defines the default alignment for items along the **cross axis**. Common values: `stretch`, `flex-start`, `flex-end`, `center`, `baseline`.
`flex-wrap`
A container property that controls whether flex items are forced onto a single line or can wrap onto multiple lines. Values: `nowrap` (default), `wrap`, `wrap-reverse`.
`align-content`
A container property that aligns the lines of items within a flex container when there is extra space on the cross axis. **Only has an effect when `flex-wrap: wrap` is set and there are multiple lines.**
`flex-grow`
An item property that defines the ability for a flex item to grow if necessary. It's a unitless proportion value (e.g., `1`).
`flex-shrink`
An item property that defines the ability for a flex item to shrink if necessary. Default is `1`.
`flex-basis`
An item property that defines the default size of an element before the remaining space is distributed. It's similar to `width` or `height` but more flexible.
`flex`
The shorthand item property for `flex-grow`, `flex-shrink`, and `flex-basis`. Example: `flex: 1 1 auto;`. The value `flex: 1` is a common shorthand for `flex: 1 1 0;`.
`align-self`
An item property that allows a single item to override the default alignment set by the container's `align-items` property.
`order`
An item property that controls the order in which items appear in the flex container. By default, all items have an order of `0`.

About the Author

Author's Avatar

TodoTutorial Team

Passionate developers and educators making programming accessible to everyone.

This article was written and reviewed by our team of web development experts, who have years of experience teaching CSS and building robust and accessible web applications.

Verification and Updates

Last reviewed: October 2025.

We strive to keep our content accurate and up-to-date. This tutorial is based on the latest CSS Flexible Box Layout Module specifications.

External Resources

Found an error or have a suggestion? Contact us!