Using the CSS flex shorthand
The CSS flex property allows you to define how the size of a flex item changes to fit the container space. It is actually a shorthand for three subproperties:
Example
#main div {
-ms-flex: 1; /* Internet Explorer 10 */
-webkit-flex: 1; /* Safari 6.1 and higher */
flex: 1;
}CSS flex syntax
First, you will need to use the display property to define a flex container in CSS:
display: flex;
Now, the syntax for the CSS flex property is as follows:
flex: grow shrink flex;
You can find the property values listed and explained in the table below:
| Value | Description | Default value |
|---|---|---|
| grow | Specifies how much of the available flex container space should the element take up. Defined in unitless numbers (a proportion). |
0 |
| shrink | Specifies how much should the element shrink when there is not enough flex container space available. Defined in unitless numbers (a proportion). |
1 |
| basis | Specifies the starting size of the flex element. Defined in CSS length units. | auto |
| auto | Same as 1 1 auto |
|
| none | Same as 0 0 auto |
|
Browser support
Chrome
29+
Edge
12+
Firefox
20+
IE
11+
Opera
12.1+
Safari
9+
Mobile browser support
Chrome
29+
Firefox
20+
Opera
12.1+
Safari
9+