What is the CSS flex-wrap property?

The flex-wrap property in CSSCascade Style Sheets is used to define whether we want to wrap flexible items or not.

There is no effect of this property on non-flexible items.

Syntax


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

Property values

  • nowrap: This is the default value. It’s used to specify that the flex items don’t wrap.

  • wrap: This identifies whether a flex item should wrap or not.

  • wrap-reverse: This specifies whether it is necessary that a flex item should wrap, and if it is, that the flex item should wrap in the reverse order.

  • initial: This sets the value to its default value.

  • inherit: This inherits the property from its parent value.

Code

The basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the flex-wrap property is as follows:

In this example, we can see that we have set the property of flex-wrap to wrap.

The third box is in the next line because we have set the property to wrap.

As a result of this, flex items are wrapped onto multiple lines. Otherwise, they are forced onto a single line.