CSS Flexbox Introduction: Display Flex, Directions, and Wrapping

Master the fundamentals of CSS Flexbox. Learn how to initialize flex containers, control layout direction axes, and wrap content elements.

Introduction

Before the CSS Flexible Box Layout module (Flexbox) was introduced in CSS3, positioning elements side-by-side required using complex float setups or inline-block configurations. These legacy techniques were difficult to manage, prone to wrapping bugs, and lacked features for vertical centering or dynamic item scaling.

Flexbox is a one-dimensional layout engine designed to distribute space and align items along a single axis (either horizontally or vertically). By establishing a parent-child relationship between a flex container and its flex items, Flexbox allows you to build responsive page headers, sidebars, and card layouts that resize smoothly on mobile viewports.

What You Will Learn

  • How to initialize a flex container using display: flex.
  • The relationship between the Main Axis and the Cross Axis.
  • Controlling element flow using the flex-direction property.
  • Wrapping items onto multiple lines using flex-wrap.
  • Shorthand layout styling using flex-flow.

Prerequisites

Detailed Explanation: Container and Items

Flexbox relies on a parent-child architecture:

  1. Flex Container: The parent element that has display: flex or display: inline-flex declared.
  2. Flex Items: The direct children of the flex container.

Once a parent is defined as a flex container, it gains control over how its child items are sized, aligned, and spaced.

The Two Axes of Flexbox

Unlike traditional block layouts that flow down the page, Flexbox works along two perpendicular axes:

  • Main Axis: The primary axis along which flex items are laid out. By default, this is horizontal (left to right).
  • Cross Axis: The axis perpendicular to the main axis. By default, this is vertical (top to bottom).

Understanding which axis is current is key because all alignment properties are relative to these axes.

1. Flex Direction (flex-direction)

Defines the direction of the Main Axis, determining whether items stack horizontally or vertically:

  • row: (Default) Main Axis is horizontal (left to right). Items flow side-by-side.
  • row-reverse: Main Axis is horizontal (right to left). Items flow side-by-side in reverse order.
  • column: Main Axis is vertical (top to bottom). Items stack vertically.
  • column-reverse: Main Axis is vertical (bottom to top). Items stack vertically in reverse.
.flex-parent {
  display: flex;
  flex-direction: column; /* Items stack vertically */
}

2. Flex Wrap (flex-wrap)

By default, flex items will try to fit onto a single line, even if it causes horizontal overflow. The flex-wrap property controls what happens when items exceed the container width:

  • nowrap: (Default) Forces all items onto a single line, shrinking their width if necessary.
  • wrap: Allows items to wrap onto multiple lines from top to bottom as needed.
  • wrap-reverse: Allows items to wrap onto multiple lines in reverse (bottom to top).

3. The flex-flow Shorthand

You can combine flex-direction and flex-wrap into a single declaration:

$$\text{flex-flow: direction | wrap};$$

.flex-container {
  display: flex;
  flex-flow: row wrap; /* Flow horizontally and wrap onto new lines */
}

Visual Learning Diagram (Mermaid)

graph LR
    subgraph Flexbox Axes (Row direction)
    MainStart[Main Start] -->|Main Axis - horizontal| MainEnd[Main End]
    CrossStart[Cross Start] -->|Cross Axis - vertical| CrossEnd[Cross End]
    end

Code Examples

Example 1: Creating a Responsive Header Menu

Build a page navigation bar where the brand logo and links sit side-by-side:

.navbar {
  /* Establish flex container */
  display: flex;
  
  /* Horizontal layout */
  flex-direction: row; 
  
  /* Allow items to wrap on narrow mobile screens */
  flex-wrap: wrap; 
  
  background-color: #0f172a;
  padding: 16px 24px;
}

.navbar__brand {
  color: white;
  font-weight: 700;
}

.navbar__menu {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
}

Example 2: Flex Column Card Stack

Create a vertical stack inside a sidebar container:

.sidebar-panel {
  display: flex;
  
  /* Stack items vertically */
  flex-direction: column; 
  
  width: 280px;
  background-color: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 20px;
}

.sidebar-panel__widget {
  /* Widgets stack from top to bottom automatically */
  margin-bottom: 24px;
}

Best Practices & Common Mistakes

  • Incorrect Axis Assumptions: A common mistake is declaring justify-content: center to center items vertically when flex-direction is set to column. When direction changes to column, the Main Axis rotates vertically, so justify-content now controls vertical alignment and align-items controls horizontal alignment.
  • Not Wrapping Lists: When building tag clouds or photo thumbnail grids, remember to add flex-wrap: wrap;. Without this, elements will ignore widths, compress to minimum dimensions, or break out of container margins.

FAQs

Q: What is the difference between flex and inline-flex? A: display: flex creates a block-level flex container that fills the full width of its parent. display: inline-flex creates an inline-level flex container that only takes up as much width as its children require, flowing side-by-side with surrounding text.

Q: Do margins collapse inside a flex container? A: No. Vertical margins of flex items inside a flex container never collapse, which makes spacing items much more predictable than standard block layouts.

Summary

CSS Flexbox structures flexible component rows or columns. By declaring display: flex on a parent, child elements become flex items laid out along a Main Axis and perpendicular Cross Axis. Direction flow is managed by flex-direction, while line breaks are handled by flex-wrap.

Related Articles

Next Tutorial

How do we align and distribute items along these axes? Let's check: Flexbox Alignment.

← Back to Syllabus