Flexbox: Mastering One-Dimensional Layouts

What This Teaches

This lesson teaches how to use CSS Flexbox to arrange items inside a container.

You will learn how flex containers, flex items, axes, wrapping, spacing, alignment, and ordering work together.

Why It Matters

Flexbox is one of the most useful layout tools for everyday interface work.

It is especially good for navigation bars, button rows, card layouts, media objects, and centering content.

Unlike CSS Grid, Flexbox is primarily used for one-dimensional layouts, meaning a row or a column.

Core Concept: Flexbox Vocabulary

• Flex Container: The parent element that contains flex items.
• Flex Item: The child elements within the flex container.
• Flex Direction: Determines the main axis of the container, row or column.
• Flex Wrap: Controls whether items wrap to the next line.
• Justify Content: Aligns items along the main axis.
• Align Items: Aligns items along the cross axis.
• Align Content: Aligns multiple lines of items within the container.
• Flex Grow: Defines how much a flex item should grow relative to other items.
• Flex Shrink: Defines how much a flex item should shrink relative to other items.
• Flex Basis: Sets the initial size of a flex item.
• Order: Controls the order of flex items.

Core Concept: Container and Items

To begin using Flexbox, set the display property of a container to flex. All direct child elements will become flex items.

.flex-container {
  display: flex;
}

Code Example: Flex Direction

The flex-direction property sets the direction of the main axis, defining how flex items are placed in the flex container.

.flex-container {
  display: flex;
  flex-direction: row; /* Default value */
  /* or flex-direction: column; */
}

Code Example: Flex Wrap

Use flex-wrap to specify whether the flex items should wrap onto multiple lines or stay on a single line.

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

Code Example: Justify Content

justify-content aligns flex items along the main axis. It controls the alignment and spacing between items.

.flex-container {
  display: flex;
  justify-content: space-between;
}

Code Example: Align Items

The align-items property aligns items along the cross axis, perpendicular to the main axis.

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

Practical Example: Responsive Navigation Bar

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

Practical Example: Flexible Card Layout

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 16rem;
}

Core Concept: Advanced Item Control

Flexbox also includes properties for controlling how individual items grow, shrink, and appear within a container.

Flex Grow, Shrink, and Basis

• Flex Grow: Controls how much a flex item should grow relative to other items.
• Flex Shrink: Controls how much a flex item should shrink relative to other items.
• Flex Basis: Sets the initial size of a flex item.

.item {
  flex: 1 1 12rem;
}

Core Concept: Align Content

align-content controls the spacing between multiple flex lines.

It only has a visible effect when flex items wrap onto more than one line.

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch

Core Concept: Order Property

The order property controls the order in which flex items appear within the container, regardless of their source order.

Use this carefully. Visual order and source order can become different, which can confuse keyboard and screen reader users.

.featured-item {
  order: -1;
}

Common Mistakes

• Putting display: flex on the wrong element.
• Forgetting that only direct children become flex items.
• Using justify-content when the issue is actually cross-axis alignment.
• Using align-items when there are multiple wrapped lines and align-content is needed.
• Expecting gap to work on older browser versions without checking support.
• Using order to fix visual layout while creating confusing keyboard or reading order.

Debugging Checklist

• Inspect the parent and confirm it has display: flex.
• Check which elements are direct children of the flex container.
• Identify the main axis from flex-direction.
• Use justify-content for the main axis and align-items for the cross axis.
• Check whether items are wrapping before using align-content.
• Temporarily add outlines or background colors to see each flex item.

Resources

Flexbox Froggy | MDN Web Docs: CSS Flexbox | CSS-Tricks Flexbox Guide