This CSS attribute defines the starting size of the flex item. It exclusively applies to flex items, meaning it won't impact non-flex items within the container. Typically, this CSS attribute is combined with other flex properties like flex-shrink and flex-grow, often specified using the flex shorthand for comprehensive value assignment.
Syntax
flex-basis: auto | width | initial | inherit;
Values
auto: This is the default setting that establishes the width of an item to be the same as its width property value, if specified. However, in cases where the width property is not explicitly defined for the flex-item, the width is determined based on the content it contains.
The width property can be set using either relative or absolute units. It specifies the starting length of the flex-item and does not permit negative values.
It assigns the attribute to its initial default state.
It acquires the property from its parent element.
Now, let's explore this attribute through the use of some illustrations.
Example
In this instance, a container consists of five flex-items. The individual items are assigned various values like auto, initial, inherit, and 150px. By omitting the width property, auto, initial, and inherit adjust the width according to the content, whereas a specific item with flex-basis: 150px will have a width of 150px.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
background-color: lightblue;
}
.flex-item {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
margin: 5px;
}
</style>
</head>
<body>
<h1> Example of the flex-basis property </h1>
<div class = "container">
<div class = "flex-item" style = "flex-basis: auto;"> auto </div>
<div class = "flex-item" style = "flex-basis: initial;"> initial </div>
<div class = "flex-item" style = "flex-basis: inherit;"> inherit </div>
<div class = "flex-item" style = "flex-basis: 150px;"> 150px </div>
<div class = "flex-item" style = "flex-basis: auto"> auto </div>
</div>
</body>
</html>
Output
Example
It is another example of flex-basis property.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
border: 2px solid red;
display: flex;
background-color: blue;
}
.container div{
padding-top: 25px;
flex-basis: 100px;
}
.flex-item{
text-align: center;
font-size: 25px;
}
.container div:nth-of-type(1) {
flex-basis: 50%;
}
.container div:nth-of-type(3) {
flex-basis: 200px;
}
.container div:nth-of-type(5) {
flex-basis: 7em;
}
</style>
</head>
<body>
<h1>
The flex-basis Property
</h1>
<div class = "container">
<div class = "flex-item" style= "background-color: lightblue;">
50%
</div>
<div class = "flex-item" style= "background-color: yellow;">
100px
</div>
<div class = "flex-item" style= "background-color: pink;">
200px
</div>
<div class = "flex-item" style= "background-color: orange;">
100px
</div>
<div class = "flex-item" style= "background-color: lightgreen;">
7em
</div>
</div>
</body>
</html>
Output
Let's explore how to specify the flex-basis attribute by utilizing the flex shorthand property.
Example
In this instance, we establish the flex-basis attribute through the concise flex property. This property serves as an abbreviation for flex-grow, flex-shrink, and flex-basis. In this scenario, we assign a value of 100px to the flex-basis, while setting the remaining two to 0.
<!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