Flexbox

What This Teaches

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

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

Why It Matters

Flexbox is one of the most useful CSS 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 one row or one column at a time.

Core Concept: Flexbox Vocabulary

• Flex container: The parent element with display: flex.
• Flex item: A direct child of the flex container.
• flex-direction: Sets the main axis, such as row or column.
• flex-wrap: Controls whether items stay on one line or wrap onto multiple lines.
• justify-content: Aligns or distributes items along the main axis.
• align-items: Aligns items along the cross axis.
• align-content: Distributes multiple wrapped lines within the container.
• flex-grow: Defines how much a flex item can grow relative to other items.
• flex-shrink: Defines how much a flex item can shrink relative to other items.
• flex-basis: Sets the starting size of a flex item.
• order: Changes the visual order of flex items.

Core Concept: Container and Items

To begin using Flexbox, set the parent element to display: flex. All direct child elements become flex items.

Flex properties like justify-content, align-items, flex-wrap, and gap usually belong on the container. Properties like flex, flex-grow, and order belong on individual items.

.flex-container {
  display: flex;
}

Main Axis and Cross Axis

Flexbox is controlled by two axes. The main axis is the direction items flow. The cross axis runs perpendicular to it.

When flex-direction changes, the meaning of justify-content and align-items changes too.

Code Example: Flex Direction

flex-direction 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 decide whether flex items should stay on one line or wrap onto multiple lines.

flex-wrap: wrap is useful for responsive card rows, tag lists, galleries, and navigation that needs to survive smaller screens.

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

Code Example: Gap

gap creates consistent spacing between flex items without adding margins to each child.

Use gap for space inside a flex row or column. Use margin when an element needs space outside the whole group.

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

Alignment Properties

The alignment properties are easier to remember when you connect each one to an axis.

Code Example: Justify Content

justify-content aligns flex items along the main axis. It controls how free space is distributed in the direction items flow.

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

Code Example: Align Items

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

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

Interactive Practice: Flexbox Playground

Use the Flexbox Playground above to test flex-direction, flex-wrap, justify-content, align-items, and gap.

Before changing a control, predict whether the items will move on the main axis or the cross axis. Then compare your prediction to the result.

Common Flex Patterns

Practical Example: Responsive Navigation Bar

This pattern keeps navigation items in a row when space allows, then wraps them instead of forcing overflow.

.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

This pattern lets cards share a row, wrap when they run out of space, and start from a readable minimum size.

.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 flex items grow, shrink, and appear within a container.

Flex Grow, Shrink, and Basis

The flex shorthand combines flex-grow, flex-shrink, and flex-basis in that order.

• First value: flex-grow. 1 means the item is allowed to grow.
• Second value: flex-shrink. 1 means the item is allowed to shrink.
• Third value: flex-basis. 12rem means the item starts at about 12rem before space is distributed.

.item {
  flex: 1 1 12rem;
}

Flex Shorthand Examples

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 visual order in which flex items appear within the container.

Use order carefully. It changes visual order, but it does not change the HTML source order, keyboard order, or screen reader reading order.

Use order for small visual adjustments, not for rewriting the actual reading order of important page content.

.featured-item {
  order: -1;
}

When Not to Use Flexbox

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.
• Using margin hacks when gap would be cleaner.
• Using order to fix visual layout while creating confusing keyboard or reading order.
• Reaching for Flexbox when CSS Grid would handle rows and columns more clearly.

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.
• Use gap before adding margins to every child.
• Check whether an item has a flex shorthand, flex-grow, flex-shrink, or flex-basis rule.
• Temporarily add outlines or background colors to see each flex item.

Resources

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