CSS flex-basis Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

flex-basis: auto;

flex-basis: 0;

flex-basis: 200px;

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

HTML

<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>

CSS

.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; 
}

Result

Editor