Search within TutorialsPark

CSS3 flex Property

A shorthand to set individual flex-grow, flex-shrink and flex-basis properties in a single declaration

Definition and Notes.

1. The CSS3 flex property is a shorthand to set flex-grow, flex-shrink and flex-basis in a single declaration

2. The W3C specification strongly recommends that the shorthand should be used instead of the individual properties because it resets unspecified component correctly


CSS3 flex property. internetexplorer safari firefox opera chrome

View in Splitscreen»


Property Values

Value Description
<flex-grow> Specifies who much the item will grow relative to other items, when free space is available
<flex-shrink> Specifies how much an item will shrink relative to other, when space is not available
<flex-basis> Sets the Initial Main Size of the flex item


Specs Value
Name flex
Value none | [<flex-grow> <flex-shrink> ? || <flex-basis>]
Initial Value 0 1 auto
Applies to flex items, including in flow pseudo element
Javascript syntax"0 1 auto"
Inherited No
Computed Value As each of the properties.
Browser Support internetexplorer safari firefox opera chrome

Related Examples.