CSS Academy · Lesson

Flex Wrap and Align-Content

Allow flex items to wrap onto multiple lines and align wrapped lines with align-content.

Flex Wrap and Align-Content is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

flex-wrap: nowrap (Default)

By default, flex items do not wrap. If items exceed the container width, they shrink or overflow rather than wrapping to a new line.

flex-wrap: wrap

With flex-wrap: wrap, items that overflow the main axis wrap to a new line (or column, in column direction). Each wrap line acts like a separate mini flex container.

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

flex-wrap: wrap-reverse

wrap-reverse wraps items in the opposite cross direction: new lines appear above (in row direction) instead of below.

Wrapping Cards Pattern

A classic responsive card layout where cards wrap to the next row as the viewport shrinks:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 280px; /* grow/shrink, ideal 280px */
}

align-content for Multi-Line

align-content controls spacing between wrapped lines on the cross axis. It has no effect when there is only one line. Values mirror justify-content.

align-content Values

Available values:

flex-start — pack lines toward cross start
flex-end — pack toward cross end
center — center lines
space-between — equal space between lines
space-around — equal space around lines
stretch — lines stretch to fill (default)

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 600px;
}

align-items vs align-content

Difference:

align-items — aligns items within each flex line
align-content — aligns the flex lines themselves within the container

Gap in Flex

The gap property (previously grid-gap) adds consistent space between flex items without using margins. It works for both row and column gaps.

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;        /* equal gap */
  row-gap: 24px;   /* row gap only */
  column-gap: 16px; /* column gap only */
}

Responsive Wrapping without Media Queries

Auto-wrap to as many columns as fit using a fixed ideal size. No media queries needed:

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

.grid > * {
  flex: 1 1 250px;
  max-width: 400px;
}

flex-flow Shorthand

flex-flow combines flex-direction and flex-wrap in one declaration:

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

Wrapping vs Grid

For complex two-dimensional layouts with defined rows and columns, CSS Grid is more appropriate. Flexbox wrapping is best for one-dimensional content that happens to flow into multiple lines.

Quick Check

Which property aligns the wrapping lines themselves when a flex container has multiple rows?

Recap

flex-wrap: wrap allows items to flow to new lines. align-content controls spacing between these lines in a multi-line container. Use gap for consistent spacing. Combine flex: 1 1 250px with flex-wrap for responsive card grids without media queries.

Frequently asked questions

Is the “Flex Wrap and Align-Content” lesson free?

Yes — the full text of “Flex Wrap and Align-Content” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Flex Wrap and Align-Content”?

Allow flex items to wrap onto multiple lines and align wrapped lines with align-content. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Flex Wrap and Align-Content” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy