Before the introduction of the Flexbox layout model, most designers and developers used different techniques to create responsive and flexible layouts. These techniques include floats, tables, and positioning. While using these techniques is still possible, most designers have switched to using the Flexbox model.
One of the most vital properties of Flexbox is flex-wrap, which allows developers to control the wrapping behavior of flex items when they exceed the size of their flex container. In this article, we will explore the flex-wrap property, its values, and how it’s important to responsive layout behavior.
To fully understand flex-wrap, you first have to understand what Flexbox is and how it works. I’m going to briefly explain it but if you want a deeper understanding of the Flexbox model, you can read about it in this article.

Flexbox is a layout model that provides a more efficient way to organize, align, and distribute space among items in a container. The Flexbox model consists of two main components: the flex container and the flex items.

The flex container is a parent element that contains one or more flex items. It sets the context for how the flex items will be positioned within it. It is basically the container into which everything enters. The flex items, on the other hand, are the child elements that are contained within the flex container. They can be sized, ordered, and aligned within the container using Flexbox properties like flex-wrap, flex-grow, flex-basis, etc.

Now that we understand what the flex container and flex items are, let’s dive into the flex-wrap property.
The flex-wrap property is used to control the wrapping behavior of flex items within the flex container. It defines whether the flex items you have in a flex container should wrap onto multiple lines or not.

To put it simply, imagine you have a box that can fit a certain number of toys. When you have too many toys to fit in the box, you can keep squeezing them in until they all fit in the box, or you can start a new box and put some of the toys there.

That’s exactly what flex-wrap does. When we use the flex-wrap property in CSS, it’s like telling the items to either stay in one line (like squeezing them all into the box) or to wrap onto a new line when there’s not enough space (like starting a new box with some of the toys).
The flex-wrap property can have three values:

This is the default flex-wrap value. It indicates that the flex items should not wrap and should remain in a single line. Here’s how to apply this to a component: