Flex basis property (flex-basis)

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:

<!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 ››

Flex basis property (flex-basis)

Syntax:

Values:

Example

Example of flex-basis property:

Comments

About

Contact

Get Connected