CSS Flexbox: The Ultimate Guide to Layout Design

---

Introduction

CSS Flexbox, or the Flexible Box Layout module, revolutionizes web design by making it easier to build responsive and dynamic layouts. Whether you're aligning items, distributing space, or handling layout responsiveness, Flexbox provides unparalleled control.

With its flexible approach to organizing elements along axes, Flexbox eliminates many traditional layout challenges, such as floating and manual positioning. This guide dives deep into all core aspects of Flexbox, including axes, alignment, wrapping, and item properties, helping you master this essential CSS feature for modern web design.

What is Flexbox?

Flexbox, short for the Flexible Box Layout, is a CSS layout module designed to arrange and align items within a container efficiently, even when their sizes are dynamic. It simplifies creating layouts by allowing developers to align and distribute space among elements, regardless of their size or the container's size.

Key Concepts of Flexbox

Flexbox works on two primary axes:

1. Main Axis: The axis along which the flex items are arranged. Controlled by flex-direction.

2. Cross Axis: The axis perpendicular to the main axis. Alignment along this axis is controlled by properties like align-items and align-content.

Flex Container and Flex Items

• Flex Container: The parent element that holds flex items. Defined by display: flex or display: inline-flex.

• Flex Items: The child elements inside a flex container.

Flexbox Cheat Sheet

1. Flex Container Properties

These properties are applied to the container.

2. Flex Item Properties

These properties are applied to the child elements.

<div class="container">
  <div class="item" style="order: 2;">1</div>
  <div class="item" style="order: 1;">2</div>
  <div class="item" style="order: 3;">3</div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-between;
  }
  .item {
    flex: 1;
    background: coral;
    margin: 10px;
    text-align: center;
  }
</style>

order reorders items without altering their HTML structure.

Main Axis and Cross Axis in Flexbox

1. Main Axis
The main axis is the primary axis along which flex items are laid out. The direction of this axis is determined by the flex-direction property.

• Direction: It can be horizontal or vertical, depending on the value of flex-direction.

  • row (default): Horizontal (left to right).

  • row-reverse: Horizontal (right to left).

  • column: Vertical (top to bottom).

  • column-reverse: Vertical (bottom to top).

Terms:

• Main-start: The starting point of the main axis, where the flex items begin to appear.

• Main-end: The endpoint of the main axis, where the flex items finish.

• Main size: The size of the flex item along the main axis. For horizontal layouts, this is the width, and for vertical layouts, this is the height.

---

2. Cross Axis

The cross axis is perpendicular to the main axis and is used for secondary alignment of items.

• Direction: It is automatically set perpendicular to the main axis.

  • If flex-direction is row or row-reverse, the cross axis is vertical.

  • If flex-direction is column or column-reverse, the cross axis is horizontal.

Terms:

• Cross-start: The starting point of the cross axis, where flex lines begin to fill.

• Cross-end: The endpoint of the cross axis, where flex lines stop.

• Cross size: The size of the flex item along the cross axis. For horizontal layouts, this is the height, and for vertical layouts, this is the width.

Example

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

<style>
  .container {
    display: flex;
    flex-direction: row; /* Main axis is horizontal */
    justify-content: flex-start; /* Align items along the main axis */
    align-items: center; /* Align items along the cross axis */
    height: 200px; /* Defines the cross size */
    border: 2px solid lightgray;
  }
  .item {
    width: 50px; /* Main size */
    height: 50px; /* Cross size */
    background: coral;
    margin: 10px;
  }
</style>

• Main Axis: Horizontal (left to right) because flex-direction: row.

• Cross Axis: Vertical (top to bottom).

• Items are aligned along the main axis using justify-content and along the cross axis using align-items.

Row vs Column

Flexbox Cheat Sheet

1. Flex Container Properties

These properties are applied to the container.

2. Flex Item Properties

These properties are applied to the child elements.