CSS flex-wrap Property

CSS flex-wrap property specifies whether the flex items should be wrapped onto multiple lines or not if enough space is not available.

By default, the flex-wrap property is set to nowrap, It means that the flex items are not wrapped and always stay in a single line(row). When enough space is not available, these flex items start shrinking to fit in this single line(row). See the example below:

Example:

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

If we use flex-wrap: wrap;, the flex items wrap up onto multiple lines if enough space is not available. See the example below:

Example:

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

When we use flex-wrap: wrap-reverse;, the flex items are wrapped in reverse order if enough space is not available. See the example below:

Example:

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

CSS Syntax

The flex-wrap property has the following syntax:

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

Property Values

The flex-wrap property accepts the following values:

nowrapThe flex items are not wrapped and shrink to fit in a single line. This is the default value.
wrapThe flex items are wrapped up onto multiple lines if enough space is not available.
wrap-reverseThis is just the reverse of flex-wrap: wrap;. i.e Flex items wrap in reverse order.
initialSets the flex-wrap property to its defafult value(nowrap).
inheritInherits the flex-wrap property from the parent element.

General Info

Default Valuenowrap
InheritedNo
JavaScript Usageelement.style.flexWrap = “wrap”