Note:
This content is freely usable and adapted from MDN Web Docs — CSS Flexible Box Layout, licensed under CC BY-SA 2.5.

Introduction

The CSS Flexible Box Layout Module, commonly known as Flexbox, is a layout model that allows elements within a container to be automatically arranged depending on screen size or available space. Flexbox was designed to make it easier to build flexible and responsive layouts without relying on floats or positioning.
It enables dynamic resizing and distribution of space among items, even when their size is unknown or changes dynamically.

What Is Flexbox?

Flexbox is a one-dimensional layout model — meaning it deals with either a row or a column at a time, but not both simultaneously. It helps align and distribute items within a container along a single axis.
Unlike traditional layout methods, Flexbox can handle variable sizes of content gracefully and adapt to the available space.

Basic Concepts of Flexbox

A Flexbox layout consists of two key parts:

  1. The flex container, which defines the area for flex items.
  2. The flex items, which are the direct children of the container.

Once an element is declared as a flex container, its direct children automatically become flex items and gain flexible positioning and sizing behavior.

Flex Container

To create a flex container, set the container’s display property to flex or inline-flex: 

.container {
  display: flex;
}

The container then defines a main axis (horizontal by default) and a cross axis (vertical by default). Items inside the container can be aligned and ordered along these axes using Flexbox properties.

Flex Items

Flex items are the direct children of a flex container. These items can be controlled using various properties such as:

Each property allows you to define how the item behaves relative to the rest of the flex items.

Main Axis vs. Cross Axis

The main axis is the primary direction in which the flex items are laid out. The cross axis is perpendicular to it.

This relationship is key to understanding how Flexbox aligns items.

Common Flexbox Properties

display

Defines a flex container:

.container {
  display: flex;
}

flex-direction

Defines the direction of the main axis — row or column:

.container {
  flex-direction: row;
  /* column |
  row-reverse | column-reverse */
}

justify-content

Aligns items along the main axis:

.container {
  justify-content: center;
  /* flex-start | flex-end |
  space-between | space-around | space-evenly */
}

align-items

Aligns items along the cross axis:

.container {
  align-items: center;
  /* flex-start | flex-end |
  baseline |stretch */
}

flex-wrap

Allows items to wrap onto multiple lines if needed:

.container {
  flex-wrap: wrap;
  /* nowrap | wrap-reverse */
}

Flexbox Example

Example of a simple Flexbox container:

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

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  background-color: #e0f7fa;
}

.item {
  background-color: #00796b;
  color: white;
  padding: 20px;
  border-radius: 5px;
}

Browser Support

Flexbox is widely supported across all modern browsers, including Chrome, Edge, Firefox, and Safari. Older browsers may require vendor prefixes (e.g., -webkit-), but these are rarely necessary today.

Reference

Content references and examples are adapted from MDN Web Docs — CSS Flexible Box Layout , licensed under the Creative Commons Attribution-ShareAlike 2.5 License (CC BY-SA 2.5) .