/    /  CSS Flex-basis property

CSS Flex-basis property

 

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

 

Syntax:

 

flex-basis: width | auto | initial | inherit

 

Property Values:

 

width:Using relative or absolute units. Defines the initial length of the flex-item.

auto: It is the default value.

initial: Its default value.

inherit: Its parent element.

 

Example:

 

<!DOCTYPE html>
<html>

<head>
<style>
.container {
height: 100px;
border: 2px solid red;
display: flex;

}
.container div{
padding-top: 25px;
flex: 0 0 100px;
}
.flex-item{
text-align: center;
font-size: 25px;
}

</style>
</head>

<body>

<div class = "container">
<div class = "flex-item" style= "background-color: lightblue;">
1
</div>

<div class = "flex-item" style= "background-color: yellow;">
2
</div>

<div class = "flex-item" style= "background-color: pink;">
3
</div>

<div class = "flex-item" style= "background-color: orange;">
4
</div>

<div class = "flex-item" style= "background-color: lightgreen;">
5
</div>
</div>
</body>
</html>

 

OUTPUT:

 

flex-basis property