 |
VOOZH | about |
|
VOOZH | about |
The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property enables the control direction in which lines are stacked. It is used to designate a single-line or multi-line format to flex items inside the flex container.
flex-wrap: nowrap | wrap | wrap-reverse | initial;Default Value: nowrap
| Value | Description |
|---|---|
nowrap | Keeps all flex items on a single line, even if they exceed the container's width, potentially causing overflow. |
wrap | Allows flex items to wrap onto multiple lines based on their width, creating a more flexible, responsive layout. |
wrap-reverse | Similar to wrap, but stacks the lines in reverse order, with the last line at the top and the first line at the bottom. |
initial | Resets the property to its default value, which is equivalent to nowrap. |
Here are the examples demonstrating how each value of the flex-wrap property works, one by one:
This property is used to break the flex item into multiples lines. It makes flex items wrap to multiple lines according to flex item width.
Syntax:
flex-wrap : wrap;Example: In this example, we are using the CSS flex wrap property.
Output:
The default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines.
Syntax:
flex-wrap: nowrap;Example: In this example, we are using the CSS flex wrap property.
Output:
This property is used to reverse the flow of the flex items when they wrap to new lines.
Syntax:
flex-wrap: wrap-reverse;Example: In this example, we are using the CSS flex wrap property.
Output:
This property is used to set it as default value.
Syntax:
flex-wrap: initial;Example: In this example, we are using the CSS flex wrap property.
Output:
The browsers supported by CSS flex-wrap property are listed below:
Note: Ensure that you test your layout across different browsers, especially older versions, as flex-wrap may behave differently in some cases (such as Internet Explorer), where layout quirks can occur.
