CSS flex-basis Property

Description

The flex-basis property determines the base of the flex , which is the initial size of the element. Similar to the width and height properties to which the contents of an element are added.

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

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