[04 | CSS 03] Understanding Flexbox: A Comprehensive Guide to Building One-Dimensional Layouts
#css#flexbox#webdev#frontend
Anik Paul

Anik Paul @anikpaul

About: React & Next.js Developer passionate about building user-focused web applications. Sharing insights on JavaScript, React, Next.js, and web development best practices.

Location:
Dhaka, Bangladesh
Joined:
Sep 14, 2024

[04 | CSS 03] Understanding Flexbox: A Comprehensive Guide to Building One-Dimensional Layouts

Publish Date: Jun 18
0 1

📢 Update (June 30, 2025):

This article has been fully revised and expanded with:

  • Working, runnable code examples
  • Real screenshots for every major property
  • In-depth visual explanations of flex-wrap, justify-content, align-items, flex-grow, and more

If you’ve read the earlier version, I recommend checking it out again. It’s now a complete, illustrated reference for mastering Flexbox.

Introduction to Flexbox

Flexbox, short for the Flexible Box Layout Module, is a modern CSS layout model that offers a more efficient way to design and distribute space among items in a container - even when their sizes are unknown or dynamic. The primary benefit of Flexbox is that it enables developers to build responsive and flexible one-dimensional layouts with much less code than traditional CSS techniques.

Whether you need to center content, space items evenly, or allow them to grow or shrink dynamically, Flexbox provides a clean and intuitive solution. It removes the need for complex float, clear, or position hacks and simplifies alignment on both horizontal and vertical axes.

The Flex Container and Flex Items

To start using Flexbox, you must first define a flex container. A flex container is any HTML element whose display property is set to flex or inline-flex. Once this is done, all of its direct children become flex items and behave according to the rules of the Flexbox model.

.container {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

Once declared, this .container becomes a flex container, and all of its direct children (flex items) are laid out using Flexbox logic.

Visual Representation

Diagram of a flex container with several flex items, showing the main axis running horizontally and the cross axis running vertically. A

This diagram demonstrates how items flow along the main axis (horizontal by default) and how alignment happens along the cross axis (vertical by default).

The Main Axis and Cross Axis

The most important concepts to understand in Flexbox are the main axis and cross axis. All Flexbox properties relate to one of these two axes.

  • Main Axis: This is the axis along which flex items are placed. By default, it runs horizontally (left to right). However, it can be changed using the flex-direction property.
  • Cross Axis: This is the axis perpendicular to the main axis. If the main axis is horizontal, the cross axis is vertical and vice versa.

Setting the Direction 

.container {
  display: flex;
  flex-direction: row; /* Default - main axis is horizontal */
}
Enter fullscreen mode Exit fullscreen mode 
.container {
  display: flex;
  flex-direction: column; /* Main axis is now vertical */
}
Enter fullscreen mode Exit fullscreen mode

Changing the direction affects how Flexbox distributes and aligns items within the container.

Aligning Items on the Main and Cross Axes

Flexbox provides powerful properties to align items along the main axis (justify-content) and the cross axis (align-items, align-self). These alignment tools are what make Flexbox particularly flexible.

1. justify-content: Aligning Along the Main Axis

The justify-content property controls the horizontal alignment of flex items within the container.

Here is an example using justify-content: center:

<div class="container justify-center">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.container {
  display: flex;
  justify-content: center;
  background-color: #f0f0f0;
  padding: 10px;
  width: 600px;
  height: 120px;
  border: 2px solid #ccc;
}

.item {
  background: #4f46e5;
  color: white;
  padding: 20px;
  margin: 5px;
  font-weight: bold;
  border-radius: 4px;
}
Enter fullscreen mode Exit fullscreen mode

Diagram:
justify-content: center

Other justify-content Values:

Value Visual Effect
flex-start Image
flex-end Image
space-between Image
space-around Image
space-evenly Image

2. align-items: Aligning Along the Cross Axis

The align-items property determines how items are aligned vertically (by default) within the flex container.

Example: align-items: center centers all flex items along the cross axis.

<div class="container align-center">
  <div class="item tall">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.container {
  display: flex;
  align-items: center;
  height: 200px;
  width: 600px;
  border: 2px solid #ccc;
  background-color: #f0f0f0;
  padding: 10px;
}

.item {
  background: #059669;
  color: white;
  padding: 20px;
  margin: 5px;
  font-weight: bold;
  border-radius: 4px;
}

.tall {
  height: 80px;
}
Enter fullscreen mode Exit fullscreen mode

Diagram:
align-items: center

Other align-items Values:

Value Visual Effect
flex-start Image
flex-end Image
stretch Image
baseline Image

3. align-self: Overriding Cross Axis Alignment for a Single Item

The align-self property overrides the container’s align-items value for a specific flex item.

<div class="container self-test">
  <div class="item">1</div>
  <div class="item special">2</div>
  <div class="item">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.container {
  display: flex;
  align-items: flex-start;
  height: 200px;
  width: 600px;
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  padding: 10px;
}

.item {
  background: #0ea5e9;
  color: white;
  padding: 20px;
  margin: 5px;
  font-weight: bold;
  border-radius: 4px;
}

.special {
  align-self: flex-end;
  background: #f97316;
}
Enter fullscreen mode Exit fullscreen mode

Diagram:
align-self: flex-end

Flexible Sizing with Flexbox

One of the most powerful and flexible features of Flexbox is its ability to let items grow, shrink, and adapt to the space available in the container. Instead of assigning rigid widths to every item, you can use the flex properties to create highly dynamic layouts.

These properties include:

  • flex-grow
  • flex-shrink
  • flex-basis
  • flex (a shorthand for all three)

Each of these controls how much space each item takes up in relation to its siblings, both when space is available and when space is constrained.

1. flex-grow: Allowing Items to Expand

The flex-grow property specifies how much a flex item should grow relative to its siblings when there is extra space in the container.

If all items have flex-grow: 1, they will grow equally. If one has flex-grow: 2, it will grow twice as much as others.

Example: flex-grow: 1, 2, 1 

<div class="container grow-test">
  <div class="item" style="flex-grow: 1;">1</div>
  <div class="item" style="flex-grow: 2;">2</div>
  <div class="item" style="flex-grow: 1;">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.grow-test {
  width: 600px;
}

.container {
  display: flex;
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 2px solid #ccc;
}

.item {
  background: #7c3aed;
  color: white;
  padding: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}
Enter fullscreen mode Exit fullscreen mode

Diagram:
flex-grow 1,2,1

Item 2 grows to occupy twice the space of items 1 and 3. The proportions are clear, responsive, and fluid.

2. flex-shrink: Allowing Items to Contract

When the container is too small to fit all items at their ideal sizes, flex-shrink controls how they shrink relative to one another.

A higher shrink value means an item will reduce in size faster than others.

Example: flex-shrink: 1, 2, 1 

<div class="container shrink-test">
  <div class="item" style="flex-shrink: 1; flex-basis: 250px;">1</div>
  <div class="item" style="flex-shrink: 2; flex-basis: 250px;">2</div>
  <div class="item" style="flex-shrink: 1; flex-basis: 250px;">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.shrink-test {
  width: 500px;
}

.container {
  display: flex;
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 2px solid #ccc;
}

.item {
  background: #f43f5e;
  color: white;
  padding: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}
Enter fullscreen mode Exit fullscreen mode

Diagram:
flex-shrink 1,2,1

Notice how item 2 becomes smaller faster than items 1 and 3 due to its higher shrink ratio.

3. flex-basis: Defining Initial Size

The flex-basis property defines the starting size of an item before any growing or shrinking takes place. It can be set using any valid CSS length unit (like px, %, rem, etc.).

Example: flex-basis: 100px, 200px, 300px 

<div class="container basis-test">
  <div class="item" style="flex-basis: 100px;">1</div>
  <div class="item" style="flex-basis: 200px;">2</div>
  <div class="item" style="flex-basis: 300px;">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.basis-test {
  width: 800px;
}

.container {
  display: flex;
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 2px solid #ccc;
}

.item {
  background: #10b981;
  color: white;
  padding: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}
Enter fullscreen mode Exit fullscreen mode

Diagram:
flex-basis 100,200,300

Each item starts with a fixed base size as defined, before any flex-grow or shrink calculations apply.

4. flex: Shorthand for Grow, Shrink, and Basis

Instead of defining flex-grow, flex-shrink, and flex-basis separately, you can use the shorthand property flex.

flex: [flex-grow] [flex-shrink] [flex-basis];
Enter fullscreen mode Exit fullscreen mode

Example: flex: 1 1 200px vs 2 1 200px 

<div class="container shorthand-test">
  <div class="item" style="flex: 1 1 200px;">1</div>
  <div class="item" style="flex: 2 1 200px;">2</div>
  <div class="item" style="flex: 1 1 200px;">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.shorthand-test {
  width: 800px;
}

.container {
  display: flex;
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 2px solid #ccc;
}

.item {
  background: #ec4899;
  color: white;
  padding: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}
Enter fullscreen mode Exit fullscreen mode

Diagram:
flex shorthand

Here, item 2 grows faster than the others, thanks to its higher grow value, even though all start with the same flex-basis.

Summary of Flex Sizing Properties

Property Description
flex-grow Determines how much an item grows when extra space is available
flex-shrink Determines how much an item shrinks when space is constrained
flex-basis The initial size of the item before grow/shrink rules apply
flex Shorthand for setting all three properties in one line

Wrapping Flex Items with flex-wrap

Flexbox is inherently a one-dimensional layout system, meaning that by default it lays out items along a single line - either in a row or a column. But what happens when the total width (or height) of your flex items exceeds that of the container?

By default, Flexbox will attempt to fit everything on one line, potentially shrinking items or overflowing the container. This is where the flex-wrap property becomes extremely useful.

What is flex-wrap?

The flex-wrap property tells the container whether or not flex items should wrap onto multiple lines, and if so, in which direction the new lines should appear.

.container {
  display: flex;
  flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

Available Values of flex-wrap

Value Description
nowrap (Default) All items are forced into one line. May cause items to shrink or overflow
wrap Items wrap to the next line as needed (top-to-bottom or left-to-right)
wrap-reverse Items wrap in the reverse direction (bottom-to-top or right-to-left)

Example 1: flex-wrap: nowrap (Default Behavior)

In this example, we have five fixed-size items within a container that is too narrow to hold them all. Since flex-wrap is set to nowrap, Flexbox tries to fit all items in one row, causing them to overflow.

<div class="container nowrap">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.container.nowrap {
  display: flex;
  flex-wrap: nowrap;
  width: 300px;
  gap: 10px;
}

.item {
  flex: 0 0 100px;
  background: lightblue;
  padding: 10px;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Diagram:
nowrap

As seen above, items overflow because they are not allowed to wrap.

Example 2: flex-wrap: wrap

When we change flex-wrap to wrap, the flex items that don't fit on one line automatically wrap to the next line.

.container.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 10px;
}
Enter fullscreen mode Exit fullscreen mode

The HTML structure remains the same.

Diagram:
wrap

Here, the items are allowed to wrap, creating a new line when there's no remaining space.

Example 3: flex-wrap: wrap-reverse

The wrap-reverse value is similar to wrap, but the direction of the wrap is reversed. Items that would normally go to the next line below are placed above the current line.

.container.wrap-reverse {
  display: flex;
  flex-wrap: wrap-reverse;
  width: 300px;
  gap: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Again, the HTML remains unchanged.

Diagram:
wrap-reverse

Items now stack upward, instead of downward.

Why flex-wrap Is Important

The flex-wrap property plays a major role in responsive design. Without it, items will be forced into a single row or column, which can cause layout issues on small screens.

When combined with properties like flex-grow, flex-basis, and gap, flex-wrap allows you to create dynamic, fluid grid-like layouts that automatically adapt to the available space.

Responsive Example: 

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.item {
  flex: 1 1 200px;
}
Enter fullscreen mode Exit fullscreen mode

In this setup, items will wrap automatically and each one will grow or shrink based on the screen size. This removes the need for explicit media queries in many cases.

Shorthand with flex-flow

You can combine flex-direction and flex-wrap using the shorthand property flex-flow.

.container {
  display: flex;
  flex-flow: row wrap;
}
Enter fullscreen mode Exit fullscreen mode

This is equivalent to:

.container {
  flex-direction: row;
  flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

Summary Table: flex-wrap at a Glance

Value Wrapping Behavior Layout Direction Example
nowrap No wrapping; items may shrink or overflow One single line (default)
wrap Wrap onto multiple lines (natural flow) Lines go from top to bottom
wrap-reverse Wrap onto multiple lines in reverse Lines go from bottom to top

Common Flex Container and Flex Item Properties (Cheat Sheet)

To effectively use Flexbox in real-world layouts, it’s important to understand not just individual properties like justify-content or flex-grow, but also how different properties interact when applied to containers and individual flex items.

This section summarizes the most frequently used properties, grouped by what they affect: the flex container or the flex items.

Common Properties Applied to the Flex Container

Flex containers control how child items are laid out. These properties help define the direction, alignment, spacing, wrapping behavior, and the overall layout behavior.

List of CSS flex container properties including gap, justify-content, align-items, flex-direction, and flex-wrap, with explanations.

Property Description
display: flex Converts a block or inline element into a flex container
flex-direction Defines the direction of the main axis (row, column, row-reverse, etc.)
flex-wrap Allows items to wrap onto multiple lines (wrap, nowrap, wrap-reverse)
justify-content Aligns items along the main axis
align-items Aligns items along the cross axis
align-content Aligns rows of items when there is extra space in the cross axis
gap Sets spacing between flex items (both row and column gaps)
flex-flow Shorthand for setting flex-direction and flex-wrap together

These properties directly influence the layout structure of the container and how child elements are arranged within it.

Common Properties Applied to Individual Flex Items

Flex items can be individually adjusted for growth, shrinkage, alignment, and sizing. These properties are essential for fine-tuning the behavior of each item within a flex container.

CSS properties for flex items, including align-self, flex-grow, flex-shrink, flex-basis, and shorthand flex with examples.

Property Description
flex-grow Determines how much the item should grow relative to siblings when space is available
flex-shrink Determines how much the item should shrink when space is tight
flex-basis The initial size of the item before growing or shrinking begins
flex Shorthand for flex-grow, flex-shrink, and flex-basis
align-self Overrides the container's align-items for a specific item
order Controls the visual order of the item within the container
margin Often used in conjunction with auto to push items (e.g., margin-left: auto)

By applying these properties, you can craft flexible, responsive, and intelligent designs that adapt to content and screen sizes gracefully.

Conclusion

Flexbox is one of the most essential layout models in modern web development. It empowers you to build dynamic, adaptable, and responsive layouts with minimal code and maximum control.

Through this article, we have explored every foundational concept behind Flexbox:

  • Understanding the main and cross axes
  • Aligning content with justify-content, align-items, and align-self
  • Making layouts flexible with flex-grow, flex-shrink, flex-basis, and flex
  • Controlling wrapping behavior using flex-wrap and flex-flow
  • Referencing practical visual diagrams and tested examples
  • Summarizing everything with quick-reference cheat sheets

By mastering these tools and understanding how they interact, you will be able to build layouts that are both powerful and elegant - adaptable across screen sizes and resolutions without the need for clunky hacks or excessive media queries.

This guide was designed to be your definitive reference on Flexbox. Revisit it as needed and practice with the examples provided to build deep confidence in this layout system.

📬 Let’s Connect
🌐 Portfolio: paulanik.com
💼 LinkedIn: Anik Paul
🐙 GitHub: anikpaul99
📩 Email: hello@paulanik.com

Comments 1 total

  • Anik Paul
    Anik PaulJun 30, 2025

    🔄 Update Notice (June 30, 2025):

    Thanks to everyone who read the original version of this guide!

    I’ve just pushed a major update with:

    • Fully working, styled code examples
    • Screenshots and diagrams for every Flexbox property
    • Clear breakdowns of how flex-wrap, align-items, flex-grow, and flex-shrink behave

    The article is now a complete, visual reference for mastering one-dimensional layouts with Flexbox.

    👉 Feel free to revisit: I’d love to hear what you think of the updated version!

Add comment