The flex-flow property is a shorthand property for the:

• flex-direction Property
• flex-wrap Property

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

.flex_container {
    flex-flow: row-reverse nowrap;
}

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

These are the allowed values.

Value	Description
flex-direction	Possible values: row (default) row-reverse column column-reverse initial inherit
flex-wrap	Possible values: nowrap (default) wrap wrap-reverse initial inherit
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.flexFlow = 'row nowrap';

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

<script>
function my_function() {
    document.getElementById('my_div').style.flexFlow = 'row nowrap';
}
</script>

---