The flex-wrap property specifies whether the flexible item should wrap or not.

<div class="flex_container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>

.flex_container {
    flex-wrap: wrap;
}

Default value	nowrap
Inherited values	no
Can it be animated?	no

These are the allowed values.

Value	Description
nowrap	Specifies that the flexible items will not wrap (default)
wrap	Specifies that the flexible items will wrap if necessary
wrap-reverse	Specifies that the flexible items will wrap, if necessary, in reverse order
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.flexWrap = 'wrap';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.flexWrap = 'wrap';
}
</script>

---