CSS Flexbox Introduction

CSS Flexbox

CSS Flexible Box Layout, commonly called Flexbox, is a layout system designed for arranging items in one dimension, primarily along a row or a column.

Flexbox makes it easier to distribute space, align items, control their direction, allow them to wrap, and adjust how they grow or shrink when the available space changes. It is especially useful for navigation menus, groups of buttons, cards, toolbars, form controls, and many other interface layouts.

What is Flexbox?

Flexbox is a CSS layout model that arranges a group of items along a main axis while providing controls for sizing, spacing, alignment, and wrapping.

Before Flexbox, developers often relied on floats, inline-block elements, tables, or positioning to create layouts that are much easier to build with modern CSS.

A basic Flexbox layout requires only a container and its direct child elements.

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

Applying display: flex to the container establishes a flex formatting context for its direct children.

.container {
  display: flex;
}

Flex Containers and Flex Items

Flexbox has two important parts: the flex container and its flex items.

<div class="flex-container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

Here, .flex-container becomes the flex container when Flexbox is applied, and the three child <div> elements become flex items.

Creating a Flex Container

A flex container is commonly created with display: flex.

.flex-container {
  display: flex;
}

The container itself participates in the surrounding page as a block-level flex container, while its children are laid out using Flexbox.

CSS also provides inline-flex, which creates an inline-level flex container.

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

The difference between flex and inline-flex concerns how the flex container participates in the layout around it. Both establish Flexbox layout for their flex items.

Main Axis and Cross Axis

Flexbox uses a main axis and a cross axis rather than assuming that every layout is simply horizontal or vertical.

The main axis follows the current flex-direction. The cross axis runs perpendicular to the main axis.

With the default flex-direction: row in a left-to-right horizontal writing mode, the main axis runs from left to right and the cross axis runs from top to bottom.

If flex-direction changes to column, the main axis follows the block direction and the cross axis follows the inline direction.

Flex Direction

The flex-direction property controls the direction of the main axis and therefore the direction in which flex items are laid out.

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

Common values include row, row-reverse, column, and column-reverse.

The Flex Direction tutorial covers these values and their effect on item order and axes in detail.

Flex Wrapping

Flex items are placed on a single flex line by default. The flex-wrap property can allow items to continue onto additional flex lines when necessary.

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

Wrapping is useful when a row of items should adapt to changing container widths instead of remaining on a single line.

Flexbox Alignment

Flexbox provides properties for distributing and aligning items along its axes.

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

justify-content distributes items along the main axis, while align-items controls alignment along the cross axis within a flex line.

When a wrapping flex container has multiple flex lines and extra cross-axis space, align-content can control the distribution of those lines.

Spacing with gap

The gap property creates consistent spacing between flex items without requiring margins on each item.

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

The spacing appears between the flex items rather than adding spacing around the outside edges of the container.

The Flexbox Gap tutorial covers gap, row-gap, and column-gap in more detail.

Flexible Items

Flex items can grow, shrink, and use a flexible starting size based on the available space in the flex container.

.item {
  flex: 1;
}

The flex shorthand controls the item's flex grow factor, flex shrink factor, and flex basis.

Later tutorials cover flex items, order, flex-grow, flex-shrink, flex-basis, and align-self individually.

Flexbox and Grid

Flexbox and Grid are both powerful CSS layout systems, but they approach layout differently.

The two systems are complementary and are often used together on the same website. Flexbox may control the items inside a component while Grid controls the larger arrangement of components.

When to Use Flexbox

Flexbox is a strong choice when a group of elements needs to be arranged primarily along one axis and their spacing or alignment should adapt to the available space.

Common uses include navigation menus, toolbars, groups of buttons, form controls, card content, centered interface elements, and rows of items that need flexible spacing.

Flexbox is also useful when the exact size of the content is not known in advance because flex items can grow and shrink according to the available space.

CSS Flexbox Example

The following example creates a simple flex container with three flex items. Open the example in the editor and remove display: flex to compare Flexbox with normal block flow. Then try changing justify-content, align-items, and gap.

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}