Flex

The flex property defines the item's length. It moves together with the other flexible items in the same container. It is a shorthand for flex-grow, flex-shrink and flex-basis properties.

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

CSS Syntax

flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style> 
          #color-container {
             width: 350px;
             height: 200px;
	     padding-left:0;
             list-style-type:none;	
             border: 1px dashed black;
             display: -webkit-flex;
             display: flex;
         }

           #color-container li {
             -webkit-flex: 1;  
             -ms-flex: 1;  
             flex: 1;
         }
	.red{background-color: red}
        .darkblue{background-color: darkblue;}
        .orange{background-color: orange}
      </style>
   </head>
   <body>

       <ul id="color-container">
           <li class="red">RED</li>
           <li class="darkblue">BLUE</li>  
           <li class="orange">Add here more content.</li>
      </ul>

   </body>
</html>

Here is the result:



Property Values

Value Descriptions
flex-grow It defines a number which specifies how much the item will grow.
flex-shrink It defines a number which specifies how much the item will shrink.
flex-basis It defines the item's length.
auto Same as 1 1 auto.
initial Same as 0 1 auto.
none Same as 0 0 auto.
inherit It inherits the property from its parents element.