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

Syntax:

selector {

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

}

Values:

  • 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

Example of flex-basis property:

​x
 
<!DOCTYPE html>
<html>
<head><style type="text/css">
div {
    width:90%; height:200px; margin-top:15px;
    background-color:#ccc;
    color: lightblue; border: 1px solid #555;
    display: flex;
     display: -webkit-flex; /* Safari */
}
.flex {
    margin-top:10px; padding:4px;
    height:175px;
    background-color:blue;  
}
div:nth-of-type(2n) {
    background-color:lightblue; color:blue;
    flex-basis: 10%;
     -webkit-flex-basis: 10%; /* Safari 6.1+ */
}
</style></head>
​
<body>
​
<div id="padding-box">
    <div class="flex">Flex box 1</div>
    <div class="flex">Flex box 2</div>
    <div class="flex">Flex box 3</div>
    <div class="flex">Flex box 4</div>
</div>
​
<p>To ensure browser support, the proprietary selectors are used in styling</p>
​
</body>
</html>

 

›› go to examples ››