Flexbox Layout

CSS Advanced•Reading time: 6 min

Flexbox (Flexible Box Module) is a one-dimensional layout method designed for arranging items in rows or columns, providing space distribution and powerful alignment capabilities.

In this tutorial, you'll learn how to use Flexbox to create flexible layouts that work across different screen sizes and devices.

1Flexbox Basics

Flexbox consists of a parent element (the flex container) and its immediate children (flex items). Setting display: flex on an element makes it a flex container.

html

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

<style>
.container {
  display: flex;
  /* Flex container properties go here */
}

.item {
  /* Flex item properties go here */
}
</style>

Flexbox Terminology:

Main Axis: The primary axis along which flex items are placed (horizontal for row, vertical for column)
Cross Axis: The axis perpendicular to the main axis
Flex Container: The parent element with display: flex
Flex Items: The direct children of the flex container

Visual Example:

Item 1

Item 2

Item 3

A basic flex container with items arranged in a row (default)

2Flex Container Properties

Several properties control how the flex container behaves and how its items are arranged.

flex-direction

css

.container {
  display: flex;
  flex-direction: row; /* default */
  /* Other options:
     flex-direction: column;
     flex-direction: row-reverse;
     flex-direction: column-reverse;
  */
}

Establishes the main axis, determining the direction flex items are placed.

flex-wrap

css

.container {
  display: flex;
  flex-wrap: nowrap; /* default */
  /* Other options:
     flex-wrap: wrap;
     flex-wrap: wrap-reverse;
  */
}

Controls whether items are forced onto a single line or can wrap onto multiple lines.

justify-content

css

.container {
  display: flex;
  justify-content: flex-start; /* default */
  /* Other options:
     justify-content: flex-end;
     justify-content: center;
     justify-content: space-between;
     justify-content: space-around;
     justify-content: space-evenly;
  */
}

Aligns items along the main axis.

align-items

css

.container {
  display: flex;
  align-items: stretch; /* default */
  /* Other options:
     align-items: flex-start;
     align-items: flex-end;
     align-items: center;
     align-items: baseline;
  */
}

Aligns items along the cross axis.

Visual Examples:

justify-content: space-between

Item 1

Item 2

Item 3

align-items: center

Item 1

Item 2

Item 3

3Flex Item Properties

Individual flex items can be controlled with their own set of properties.

flex-grow

css

.item {
  flex-grow: 0; /* default */
  /* Higher values grow more */
}

.item-2 {
  flex-grow: 1; /* This item will grow */
}

Determines how much an item can grow relative to other flex items.

flex-shrink

css

.item {
  flex-shrink: 1; /* default */
  /* Higher values shrink more */
}

.item-2 {
  flex-shrink: 0; /* This item won't shrink */
}

Defines how much an item will shrink relative to other items.

flex-basis

css

.item {
  flex-basis: auto; /* default */
  /* Can be a length: 200px, 10rem, etc. */
}

.item-2 {
  flex-basis: 250px; /* Initial size */
}

Sets the initial size of a flex item before growing or shrinking.

flex (shorthand)

css

.item {
  /* flex: grow shrink basis */
  flex: 0 1 auto; /* default */
}

.item-2 {
  flex: 1; /* flex: 1 1 0% */
}

.item-3 {
  flex: 2 0 300px;
}

Shorthand for flex-grow, flex-shrink, and flex-basis.

Visual Example:

Fixed

flex: 1

flex: 2

The first item has a fixed width, while the other two use flex to take up remaining space at a 1:2 ratio.

4Common Flexbox Patterns

Here are some common layout patterns that Flexbox makes easy to implement.

Navigation Bar

css

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-brand {
  font-weight: bold;
}

.nav-menu {
  display: flex;
  gap: 1rem;
}

Card Layout

css

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px; /* Grow, shrink, basis */
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1; /* Fill available space */
}

Visual Examples:

Navigation Bar

Brand Logo

HomeAboutContact

Centering Content

Perfectly Centered

5Try It Yourself

Create a simple card layout using Flexbox. The design should have a header, content area, and footer with different alignment needs.

flexbox-cards.css

Example Code

css

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #f0f0f0;
  padding: 15px;
  font-weight: bold;
}

.card-body {
  flex: 1;
  padding: 15px;
  background-color: white;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background-color: #f8f8f8;
}

.btn {
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #4a6cf7;
  color: white;
  border: none;
  cursor: pointer;
}

.card-meta {
  color: #666;
  font-size: 0.9em;
}

Pro Tip

Use the Flexbox shorthand flex: 1 to make elements expand and fill available space, which is especially useful for creating equal-height columns or making card layouts where content areas should stretch.

Summary

✓
Flexbox provides a one-dimensional layout system for rows or columns
✓
Container properties control overall layout (justify-content, align-items)
✓
Item properties control individual element behavior (flex-grow, flex-shrink)
✓
Flexbox is ideal for navigation bars, card layouts, and centering content

Previous: CSS Box Model Next: CSS Grid