It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Flex-Basis Property

Reading time 1 min
Published Aug 8, 2017
Updated Oct 1, 2019

What is CSS flex basis?

The CSS flex-basis property only applies to flex items. By using it, you can set the initial length for flex items:

Example
a:nth-of-type(3) {
    -webkit-flex-basis: 50px; /* Safari 6.1 and newer */
    flex-basis: 50px;
}

The CSS flex-basis property syntax

The syntax for the flex-basis property is as follows:

flex-basis:value;

The available property values are presented in the following section.

Property values

Value Description
auto The default value. The size of the element depends on width and height properties
content The size of the element depends on its content
Length units The initial size of the flex item defined in CSS length units (e.g., px)
Percentages The initial size of the flex item defined in percentages, representing the relation to the size of the parent flex container

Browser support

Browser image
Chrome
29+
Browser image
Edge
12+
Browser image
Firefox
22+
Browser image
IE
11+
Browser image
Opera
12.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
29+
Browser image
Firefox
22+
Browser image
Opera
12.1+
Browser image
Safari
9+