CSS flex attribute

Definition and Usage

flex is a shorthand property for the following properties:

The flex property sets the flexible length of flexible items.

Note:The flex property is invalid if the element is not a flexible item.

See also:

Tutorial: CSS flexible box

Reference:CSS flex-basis attribute

Reference:CSS flex-direction attribute

Reference:CSS flex-flow attribute

Reference:CSS flex-grow attribute

Reference:CSS flex-shrink attribute

Reference:CSS flex-wrap attribute

Reference:HTML DOM flex property

Example

Make all flexible items have the same length regardless of their content:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

Try it yourself

CSS syntax

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Attribute value

Value Description
flex-grow Number, specifying the growth of the item relative to the other flexible items.
flex-shrink Number, specifying the shrinkage of the item relative to the other flexible items.
flex-basis

Length of the item.

Valid values: "auto", "inherit", or values with units of "%", "px", "em", or any other length units.
auto Equivalent to 1 1 auto.
initial Equivalent to 0 0 auto. See also initial.
none Equivalent to 0 0 auto.
inherit Inherits this property from its parent element. See also inherit.

Technical details

Default value: 0 1 auto
Inheritance: No
Animation creation: Supported. Please see the individual properties. See also:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.flex="1"

More examples

Combine flex and media queries to create different layouts for different screen sizes/devices:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* Responsive layout - Make a single column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Try it yourself

Browser support

The numbers in the table note the first browser version that fully supports the property.

Numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0