CSS flex-basis attribute

Definition and Usage

The flex-basis property specifies the initial length of the flexible item.

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

See also:

CSS Tutorial: CSS Flexible Box

CSS Reference Manual:flex Property

CSS Reference Manual:flex-direction Property

CSS Reference Manual:flex-flow Property

CSS Reference Manual:flex-grow Property

CSS Reference Manual:flex-shrink Property

CSS Reference Manual:flex-wrap Property

HTML DOM Reference Manual:flexBasis Property

Example

Set the initial length of the second flexible item to 100 pixels:

div:nth-of-type(2) {
  flex-basis: 100px;
}

Try it yourself

CSS Syntax

flex-basis: number|auto|initial|inherit;

Attribute Value

Value Description
number Length unit or percentage, specifying the initial length of the flexible item.
auto Default value. The length is equal to the length of the flexible item. If the item does not specify a length, the length will be based on its content.
initial Sets this property to its default value. See also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical Details

Default value: auto
Inheritance: No
Animation creation: Supported. See also:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.flexBasis="200px"

Browser Support

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

Numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.

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