CSS flex property specifies how a flex item will grow or shrink within its flex container. It is a shorthand for the following three flexbox properties:
A shorthand property combines two or more properties into a single property which helps us reducing the code.
In the example below, we have specified flex: 1 1 0;, it means that item2 grows along the main axis to cover the unused space if any, and shrinks 2 times faster than the remaining flex items if enough space is not available. It remains in its original size in the beginning as flex-basis is set to 0. Try it out:
Example:
#item2{
flex: 1 1 0;
}
Note- flex: 1 1 0; is same as flex: 1;
CSS Syntax
The flex property has the following syntax:
flex: flex-grow flex-shrink flex-basis |none|auto|initial|inherit;
Property Values
The flex property accepts the following values:
| flex-grow | Defines how much a flex item will grow compared to the remaining flex items if enough space is available. |
| flex-shrink | Defines how faster a flex item will shrink compared to the remaining flex items if enough space is not available. |
| flex-basis | Defines the initial size of a flex item. |
| none | Same as 0 0 auto. |
| auto | Same as 1 1 auto. |
| initial | Sets the flex property to its default value. The default value is 0 1 auto. |
| inherit | Inherits the flex property from the parent element. |
General Info
| Default Value | 0 1 auto |
| Inherited | No |
| JavaScript Usage | element.style.flex= “1 1 0” |
