CSS flex Property
Let all the flexible items be the same length, regardles of its content:
Try it yourself »
The flex property is supported in all major browsers, except for Safari.
The flex property is not supported IE 9 or earlier, in IE 10 this property is supported with the prefix -ms-.
Definition and Usage
The flex property specifies the length of the item, relative to the rest of the flexibel items inside the same container.
The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties.
Note: If the element is not a flexible item, the flex property has no effect.
|Default value:||0 1 auto|
|Animatable:||yes, see individual properties. Read about animatable|
|flex-grow||A number specifying how much the item will grow relative to the rest of the flexible items|
|flex-shrink||A number specifying how much the item will shrink relative to the rest of the flexible items|
|flex-basis||The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit|
|auto||Same as 1 1 auto.|
|initial||Same as 0 1 auto. Read about initial|
|none||Same as 0 0 auto.|
|inherit||Inherits this property from its parent element. Read about inherit|
CSS Reference: flex-basis property
CSS Reference: flex-direction property
CSS Reference: flex-flow property
CSS Reference: flex-grow property
CSS Reference: flex-shrink property
CSS Reference: flex-wrap property
HTML DOM reference: flex property
Thank You For Helping Us!
Your message has been sent to W3Schools.