CSS flex-basis Property

Description

The flex-basis CSS property determines the initial size of a flex item along the main axis within a flex container. It defines the ideal width or height of the item before any available space is distributed among the items. It can be set using various units like pixels, percentages, or content-based measurements. When used in combination with flex-grow and flex-shrink, flex-basis helps control how space is allocated to flex items within a flex container, making it a key component of flexible and responsive layouts in CSS.

Initial value
auto
Applies to
Flex items, including in-flow pseudo-elements
Inherited
No
Computed value
As specified, but with relative lengths converted into absolute lengths
Animatable
Yes
JavaScript syntax
object.style.flexBasis

Interactive Demo

Item 1
Item 2
Item 3

Syntax

flex-basis: auto | <size>

Values

  • autoIndicates auto size based on the content of the item.
  • <size>Specifies the size of the element in px, mm, pt or in percent along the main axis. In this case, the size is calculated relative to the parent. A negative value is not valid.

Example

<div class="flex-container"> 
<div class="flex-item one">First</div>
<div class="flex-item two">Second</div>
<div class="flex-item three">Third</div>
</div>
.flex-container { 
   display: flex;
   height: 300px;
   color: #fff;
   font-size: 2em;
   flex-flow: column wrap;
} 
.flex-item { 
   display: flex;
   align-items: center; 
   justify-content: center;
} 
.one { 
   background: #508694;
   margin-right: 10px;
   flex-basis: 100%; 
   order: 1;
} 
.two { 
   background: #BB844C;
   margin-bottom: 10px;
   flex: 1 1 0; 
   order: 2;
} 
.three { 
   background: #929D79; 
   flex: 1 1 0; 
   order: 3; 
}

Browser Support

The following table will show you the current browser support for the CSS flex-basis property.

Desktop
Edge Chrome Firefox Opera Safari
12292212.19
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
292212.1924.4

Last updated by CSSPortal on: 1st January 2024