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


Syntax:

CSS3 flex property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:



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

Specifications

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 object.style.flex="0 1 auto"
Inherited No
Computed Value As each of the properties.
Browser Support internetexplorer safari firefox opera chrome

Related Examples.