CSS3 flex Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The flex CSS property specifies the components of a flexible length. It is a shorthand property for setting the flex-grow, flex-shrink and the flex-basis properties at once.
The following table summarizes the usages context and the version history of this property.
| Default value: | 0 1 auto; See individual properties |
|---|---|
| Applies to: | Flex items |
| Inherited: | No |
| Animatable: | Yes, as each of the properties of the shorthand is animatable. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the flex property in action.
Example
Try this code ».flex-container {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1; /* Standard syntax */
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
flex-grow |
Specifies the flex grow factor or positive flexibility for the flex item. |
flex-shrink |
Specifies the flex shrink factor or negative flexibility for the flex item. |
flex-basis |
Specifies the initial size of the flex item. |
none |
Equivalent to setting flex to 0 0 auto. |
auto |
Equivalent to setting flex to 1 1 auto. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element flex property. |
Browser Compatibility
The flex property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 Multi-column Layouts.
Related properties: align-content, align-items, align-self, display, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.
