Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
flex
html
communitycreator

What is the CSS flex-wrap property?

Behzad Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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.

RELATED TAGS

css
flex
html
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring