CSS flex-wrap

The flex-wrap property in CSS is used to control the wrapping of flex items inside a flex container. By default, flex items will try to fit into a single line. However, by using the flex-wrap property, you can specify whether the flex items should wrap onto multiple lines when they exceed the width of the flex container.

The flex-wrap property can take three values:

  1. nowrap: Default value. The flex items will not wrap and will try to fit into a single line.
  2. wrap: The flex items will wrap onto multiple lines if needed.
  3. wrap-reverse: The flex items will wrap onto multiple lines, but in reverse order.

Let's see some examples to better understand how the flex-wrap property works:

Result:
1
2
3
4
5
6

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

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 5px;
}

In the example above, we have a flex container with six flex items. Since the flex-wrap property is set to nowrap, the flex items will not wrap onto multiple lines and will try to fit into a single line.

Result:
1
2
3
4
5
6

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

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 5px;
}

In this example, the flex-wrap property is set to wrap. Now, if the flex items exceed the width of the flex container, they will wrap onto multiple lines.

Try experimenting with different values for the flex-wrap property and see how it affects the wrapping of flex items inside a flex container!