Flexbox Basics

CSS Flexbox Basics

CSS Flexbox is a layout system designed to arrange elements in a row or column. It makes it easier to control the direction, alignment, spacing, and available space between items inside a container.

What is Flexbox?

Flexbox, short for Flexible Box Layout, is a CSS layout system for arranging items along one main dimension at a time. A flex layout can run horizontally as a row or vertically as a column.

Flexbox is useful for navigation menus, groups of controls, cards, centered content, and many other layouts where items need to be aligned or spaced within a container.

Creating a Flex Container

Flexbox begins by setting the display property of a container to flex.

.container {
  display: flex;
}

The element becomes a flex container, and its direct children become flex items.

Flex Items

The direct children of a flex container become flex items. You do not need to add display: flex; to each item.

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

Only direct children become flex items. Content nested inside those children continues to use its own normal layout unless another layout method is applied to it.

Flex Direction

The flex-direction property determines the direction of the main axis and therefore the direction in which flex items are arranged.

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

The default value is row. Items are arranged along the inline direction of the flex container. For a typical left-to-right English page, they appear from left to right.

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

With column, the items are arranged vertically along the block direction.

Flexbox also provides row-reverse and column-reverse, which reverse the direction in which the items are displayed.

Wrapping Flex Items

Flex items are placed on a single line by default. The flex-wrap property can allow items to move onto additional lines when there is not enough space.

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

The default value is nowrap. Setting flex-wrap: wrap; is useful when a group of flex items needs to adapt to a narrower container.

Spacing with gap

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

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

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

Aligning Items with justify-content

The justify-content property controls how flex items are distributed along the main axis when there is extra space in the flex container.

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

Common values include flex-start, center, flex-end, space-between, space-around, and space-evenly.

For the default flex-direction: row; on a typical left-to-right page, the main axis runs horizontally, so justify-content controls horizontal distribution.

Aligning Items with align-items

The align-items property controls how flex items are aligned along the cross axis.

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

Common values include stretch, flex-start, center, and flex-end. The initial value is normal, which generally behaves like stretch for flex items.

With the default row direction, the cross axis runs vertically, so align-items: center; can vertically center the items when the container has extra height.

Flexible Items

Flex items can grow or shrink to use the available space. The flex shorthand is commonly used to control this behavior.

.item {
  flex: 1;
}

When several sibling flex items use flex: 1;, they can grow to share the available space evenly.

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

.item {
  flex: 1;
}

Flexbox provides additional properties for more precise control, but these basic settings are enough for many simple layouts.

Try Flexbox

Edit the example to experiment with flex-direction, flex-wrap, justify-content, align-items, and gap. Resize the preview to see how the flex items respond to the available space.

When to Use Flexbox

Flexbox works especially well when elements need to be arranged primarily in one direction, such as a row of navigation links, a group of buttons, or a vertical group of components.

When a layout needs coordinated rows and columns, CSS Grid may be a better choice. Flexbox and Grid are complementary layout systems and are often used together on the same page.

Summary

CSS Flexbox provides a flexible way to arrange and align elements in a row or column. Setting display: flex; creates a flex container whose direct children become flex items. Properties such as flex-direction, flex-wrap, gap, justify-content, and align-items control how those items are arranged and spaced.

The next tutorial covers Grid Basics and introduces a CSS layout system designed for arranging content in rows and columns.