0Pricing
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: 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;
}

All lessons in this course

  1. Display Flex and Flex Direction
  2. Justify-Content and Align-Items
  3. Flex Wrap and Align-Content
  4. Flex Grow Shrink and Basis
← Back to CSS Academy