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:
#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 |