CSS flex-basis Property

CSS flex-basis Property


CSS flex-basis Property
 
The flex-basis property sets the initial size of a flex item along the main axis before flex-grow and flex-shrink factors are applied.
 
Syntax -
 
flex-basis: number|auto|initial|inherit;
 
Now we will see the values with their descriptions -
 
Value
Description
number
It can be a length unit, or percentage which is specifying the initial length of the flexible item
auto
The length is equal to the length of the flexible item, and this is the default value.
initial
Set this property to its default value.
inherit
Inherits this property from its parent element.
 
Now we will see example -
 
Example - 
 
<style>
  .container {
  border: 1px solid black;
  padding: 0.5rem;
  width: 300px;
  display: flex;
  flex-direction: row;
  }
  .item {
  width: 200px;
  font-size: 2rem;
  color: white;
  text-align: center;
  }
  .one {
  background: blue;
  }
  .two {
  background: red;
  flex-basis: 500px;
}

  .three {
  background: green;
  }
</style>
<div class="container">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
</div>
 
Output -