CSS Flexbox Tutorial: A Step-by-Step Guide for Beginners

Introduction

CSS Flexbox, formally known as the Flexible Box Layout Module, is one of the most powerful tools in modern web development. Before Flexbox was introduced, web developers relied on floats, absolute positioning, and inline-block tricks to arrange elements on a page. These techniques were fragile, difficult to maintain, and often broke on different screen sizes.

Flexbox simplifies layout design. It gives you an easy way to distribute space, align items horizontally or vertically, and build responsive layouts that adjust smoothly to any screen.

The Core Idea: Container vs. Items

Flexbox operates on a parent-child model. To use Flexbox, you must understand two key elements:

• Flex Container: The parent HTML element where you enable Flexbox by setting display: flex;.
• Flex Items: The direct children inside the flex container that follow Flexbox rules.

Flexbox also relies on two axes:

• Main Axis: The primary direction in which flex items are laid out (horizontal by default).
• Cross Axis: The axis perpendicular to the main axis (vertical by default).

Step 1: Creating Your First Flex Container

Let us look at a simple HTML structure with a parent container and three child boxes:

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

By default, <div> tags are block elements and stack vertically. To place them side by side, apply display: flex; to the parent:

.container {
  display: flex;
  background-color: #f4f4f4;
  padding: 10px;
}

.box {
  background-color: #007bff;
  color: white;
  padding: 20px;
  margin: 5px;
}

Explanation: Adding display: flex; turns the container into a flex context. Its direct children immediately line up horizontally in a row.

Key Properties for the Flex Container

1. flex-direction

The flex-direction property defines the main axis. It determines whether your items flow horizontally or vertically.

• row (default): Items flow from left to right.
• row-reverse: Items flow from right to left.
• column: Items stack vertically from top to bottom.
• column-reverse: Items stack vertically from bottom to top.

.container {
  display: flex;
  flex-direction: column;
}

2. justify-content

The justify-content property aligns items along the main axis (horizontal by default).

• flex-start (default): Items align to the beginning of the container.
• flex-end: Items align to the end of the container.
• center: Items are centered along the main axis.
• space-between: Items are evenly distributed; the first item touches the start, the last item touches the end.
• space-around: Items have equal space on both sides.
• space-evenly: Items have completely equal spacing between them and the edges.

.container {
  display: flex;
  justify-content: space-between;
}

3. align-items

The align-items property aligns items along the cross axis (vertical by default).

• stretch (default): Items stretch to fill the height of the container.
• center: Items are centered vertically.
• flex-start: Items align to the top of the container.
• flex-end: Items align to the bottom of the container.

.container {
  display: flex;
  height: 200px;
  align-items: center;
}

4. gap

Instead of manually adding margins to each child, you can use the gap property on the container to define spacing between flex items:

.container {
  display: flex;
  gap: 15px;
}

5. flex-wrap

By default, flex items try to fit onto a single line. The flex-wrap property controls whether items wrap onto multiple lines when there is not enough room.

• nowrap (default): All items stay on one line, shrinking if necessary.
• wrap: Items wrap onto multiple lines from top to bottom.

.container {
  display: flex;
  flex-wrap: wrap;
}

Key Properties for Flex Items

You can also control individual children inside a flex container.

1. flex-grow, flex-shrink, and flex-basis

• flex-grow: Determines how much an item will grow relative to others if positive space is available. A value of 1 means it takes up equal available space.
• flex-shrink: Determines how much an item will shrink relative to others when space is limited.
• flex-basis: Sets the default size of an item before space is distributed (like an initial width or height).

The shorthand flex combines all three: flex: [grow] [shrink] [basis];

.box {
  /* grow = 1, shrink = 1, basis = 200px */
  flex: 1 1 200px;
}

2. align-self

The align-self property allows a single flex item to override the container's align-items value.

.box-special {
  align-self: flex-end;
}

Practical Example: Centering a Div Perfectly

Centering an element both vertically and horizontally used to be difficult in CSS. With Flexbox, it takes only three lines of CSS:

.center-container {
  display: flex;
  justify-content: center; /* Horizontally centers */
  align-items: center;     /* Vertically centers */
  height: 100vh;           /* Full viewport height */
}

Common Mistakes Beginners Make

• Applying container properties to items: Properties like justify-content and align-items belong on the parent container, not the child items.
• Forgetting that flex-direction flips axes: If you set flex-direction: column;, the main axis becomes vertical. That means justify-content will align items vertically, and align-items will align items horizontally.
• Not setting container height: When trying to vertically center items with align-items: center, make sure the parent container actually has a defined height (such as height: 300px; or min-height: 100vh;). If the container height matches the items, vertical centering will not be visible.

Frequently Asked Questions (FAQ)

What is the difference between Flexbox and CSS Grid?

Flexbox is primarily one-dimensional, designed to align items along a single row or single column. CSS Grid is two-dimensional, designed to manage rows and columns at the same time. Use Flexbox for interface components like navigation bars and buttons, and Grid for complete page layouts.

Is Flexbox supported by all modern browsers?

Yes. Flexbox is supported by all major modern browsers, including Chrome, Firefox, Safari, Edge, and modern mobile browsers.

Can I nest flex containers?

Yes. A flex item can also be a flex container. Simply apply display: flex; to a child element to arrange its own children using Flexbox.

Conclusion

CSS Flexbox is an essential skill for modern web design. By understanding the relationship between the flex container and flex items, and how the main and cross axes work, you can create clean, responsive layouts with minimal CSS. Practice building small components like navbars, card grids, and centered heroes to solidify your understanding.