Flex-basis

The flex-basis property defines the initial main size of the flexible item.

Let us you remind that if there are no flexible items, flex-basis property won't have any effect.

Internet Explorer 10 and earlier versions do not support the flex-basis property.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
            #color-container {
               width: 350px;
                height: 100px;
                border: 1px solid #c3c3c3;
                display: -webkit-flex; 
                display: flex;
             }

	    #color-container div {
	       -webkit-flex-grow: 0; 
  	       -webkit-flex-shrink: 0; 
	       -webkit-flex-basis: 40px; 
  	       flex-grow: 0;
	       flex-shrink: 0;
   	       flex-basis: 150px;
          }

	     #color-container div:nth-of-type(2) {
	        -webkit-flex-basis: 80px; 
                flex-basis: 80px;
         }

	     #color-container div:nth-of-type(5) {
	        -webkit-flex-basis: 100px; 
                flex-basis: 100px;
         }
     </style>
  </head>

  <body>

      <div id="color-container">
            <div style="background-color:red;"></div>
            <div style="background-color:orange;"></div>
            <div style="background-color:blue;"></div>
            <div style="background-color:purple;"></div>
            <div style="background-color:yellow;"></div>
      </div>

   </body>

</html>

Here is the result:

Property Values

Value Descriptions
number It defines the initial length of the flexible-item. It may be a length unit or percentage.
auto The length is equal the flexible item's length. If there is no specified item length, it will be according to its content. This value is the default for this property.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.


Prev
Next