Practical CSS Flexbox Layouts

Practical CSS Flexbox Layouts

CSS Flexbox properties can be combined to create practical layouts for navigation, cards, buttons, page sections, centered content, and responsive components.

Flexbox is especially useful when content needs to be arranged and aligned in one primary direction. The examples on this page combine the Flexbox properties covered throughout this section and show how they can work together in common website layouts.

Choosing Flexbox for a Layout

Flexbox works especially well when a layout primarily needs to arrange items in a row or column and control their alignment, spacing, and flexible sizing.

A typical Flexbox layout begins by establishing a flex container.

.container {
  display: flex;
}

From there, container properties such as flex-direction, flex-wrap, justify-content, align-items, and gap control the overall arrangement.

Individual items can then use properties such as flex, order, and align-self when additional control is needed.

Navigation Layout

Flexbox is useful for arranging navigation links in a horizontal row with consistent spacing.

.nav-list {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

The navigation items remain in normal source order while Flexbox handles their horizontal arrangement and spacing.

The layout can also distribute groups of navigation content across the available width.

.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

This pattern is commonly useful when a navigation area contains a site name or logo on one side and a group of links on the other.

Flexible Card Layout

A wrapping flex container can arrange cards across a row and move them onto additional lines when space becomes limited.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 250px;
}

The 250px flex basis gives each card a useful starting size. The cards can grow when additional space is available and shrink as needed before wrapping onto another line.

This creates a flexible card arrangement without assigning a fixed width to every card.

Media Object Layout

A media object places an image, icon, or other visual beside a flexible content area.

.media {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.media-image {
  flex: 0 0 100px;
}
.media-content {
  flex: 1;
  min-width: 0;
}

The image keeps its intended main size while the content area uses the remaining space. The min-width: 0 declaration allows the flexible content area to shrink below its automatic content-based minimum when necessary.

This pattern works well for comments, profile summaries, article previews, and similar components.

Button Group

Flexbox can arrange related buttons while maintaining consistent spacing between them.

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

Wrapping allows the buttons to move onto another line when the available width becomes too small.

The group can also be aligned within its container.

.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

This can be useful for groups of form actions or interface controls.

Centered Content

Flexbox can center content along both the main and cross axes.

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

In the default row direction, justify-content: center centers the content along the horizontal main axis, while align-items: center centers it along the vertical cross axis in a typical horizontal writing mode.

This pattern is useful for message panels, loading areas, empty states, and other components that need centered content.

Sidebar and Content Layout

Flexbox can create a simple two-part layout containing a sidebar and a flexible main content area.

.page-layout {
  display: flex;
  gap: 25px;
}
.sidebar {
  flex: 0 0 220px;
}
.content {
  flex: 1;
  min-width: 0;
}

The sidebar keeps a 220-pixel main size, while the content area grows and shrinks to use the remaining space.

For smaller screens, the layout can switch from a row to a column.

@media (max-width: 700px) {
  .page-layout {
    flex-direction: column;
  }
  .sidebar {
    flex-basis: auto;
  }
}

The HTML source order remains unchanged while the physical arrangement adapts to the available width.

Responsive Flexbox Layouts

Flexbox layouts can respond naturally to available space through flexible sizing and wrapping.

.items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.item {
  flex: 1 1 250px;
}

This pattern may be enough for components that simply need to wrap as space becomes limited.

Media queries can be added when the design requires a deliberate layout change at a particular viewport width.

@media (max-width: 600px) {
  .items {
    flex-direction: column;
  }
}

Use the natural flexibility of Flexbox where possible, then add responsive rules when the design requires additional control.

Flexbox and Grid

Flexbox and CSS Grid solve different layout problems and can be used together on the same page.

A Grid layout can contain Flexbox components, and a flex item can itself contain a Grid layout. Choose the layout method that best matches the relationship between the items being arranged.

The next tutorial begins the CSS Grid section.

Practical Flexbox Guidelines

When building Flexbox layouts, a few general practices help keep the layout predictable and maintainable.

• Keep the HTML source order logical before changing visual presentation.
• Use gap for consistent spacing between flex items when appropriate.
• Use flex-wrap when items should move onto additional lines.
• Remember that justify-content works along the main axis and align-items works along the cross axis.
• Use align-self when only one flex item needs different cross-axis alignment.
• Use the flex shorthand when defining the grow, shrink, and basis behavior together.
• Consider min-width: 0 for flexible content areas that must be allowed to shrink.
• Avoid using order or reversed directions to repair an illogical source order.
• Use CSS Grid when the layout requires coordinated control of both rows and columns.

Practical Flexbox Example

The following example combines Flexbox properties to create a responsive group of cards. The cards share available space, maintain consistent gaps, and wrap onto additional lines when needed.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.card {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
}
.card a {
  margin-top: auto;
}

Each card is both a flex item and a flex container. The outer Flexbox controls the card layout, while the inner Flexbox allows the link to remain toward the bottom when cards contain different amounts of text.