The flex-basis property describes the initial length of a flexible item.        


selector {

      flex-basis: number | auto | initial | inherit;



  • number - Determines the length of the item expressed as 'auto', 'inherit' or a number (%, px, em or any other length unit)
  • auto - Default value. Let's browser decides how to size the it, but should be equal to '1 1 auto'
  • initial or inherit


Example of flex-basis property:


›› go to examples ››