The flex property is a shorthand property for the:

• flex-basis Property
• flex-grow Property
• flex-shrink Property

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

.flex_container > div {
    flex: 1 1 auto;
}

Default value	0 1 auto
Inherited values	no
Can it be animated?	yes

These are the allowed values.

Value	Description
flex-grow	A number specifying how much the item will grow relative to the rest of the flexible items
flex-shrink	A number specifying how much the item will shrink relative to the rest of the flexible items
flex-basis	The length of the item ("auto", "inherit", "%", "px", "em" or any other length unit)
auto	Same as 1 1 auto
none	Same as 0 0 auto
initial	Same as 0 1 auto
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.flex = '1 1 auto';

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

<script>
function my_function() {
    document.getElementById('my_div').style.flex = '1 1 auto';
}
</script>

---