flex-basis

Avatar of 34 Cross
34 Cross on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

The flex-basis property is a sub-property of the Flexible Box Layout module. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero.

.element {
  flex-basis: 100px;
}

A flex-basis value set to auto sizes the element according to its size property (which can itself be the keyword auto, which sizes the element based on its contents).

Syntax

flex-basis: <number>

Please note that as for any width, negative lengths are invalid.

Demo

Browser support

IEEdgeFirefoxChromeSafariOpera
1112+22+22-28 1
29+
7-8 1
9+
12.1+
iOS
Safari
Chrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
7-8.4 1
9+
92+90+92+12.1+
Source: caniuse
  • 1 Supported with prefix -webkit-

For more informations about how to mix syntaxes in order to get the best browser support, please refer to “Using Flexbox” and this article from DevOpera.

More information