The flex property is a shorthand for 3 flex item properties:
They are: flex-grow, flex-shrink, and flex-basis.
This property is commonly used to create responsive layouts.
Flex items with flex set to auto. The items fill the container.
<style>
.flex {
background-color: #776fac;
padding: 5px;
display: flex;
}
.flex > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
flex: auto;
}
</style>
<div class="flex">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
The flex property is a shorthand property for:
flex: flex-grow flex-shrink flex-basis |
auto | initial | inherit;
| Value | Description |
|---|---|
| flex-grow | Number specifying how much the item will grow relative to the rest of the flex items |
| flex-shrink | Number specifying how much the item will shrink relative to the rest of the flex items |
| flex-basis | Item length. Accepted values: auto, inherit, or any length value, including percentages. |
auto |
Same as 1 1 auto. |
none |
Same as 0 0 auto. |
initial |
Same as 0 1 auto. |
inherit |
Inherits the value from its parent element. |
This table shows when flex support started for each browser.
 Chrome
|
29.0 | Aug 2013 |
 Firefox
|
28.0 | Mar 2014 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
17.0 | Aug 2013 |
 Safari
|
9.0 | Sep 2015 |
