PUBLISHED ON: APRIL 3, 2021
CSS flex-basis Property
The flex-basis property in CSS asserts the initial main size of a particular flex item. It is identified for setting the size of the content box.
Note: If both the flex-basis property and width or height are set for an element, the flex-basis property has priority over them.
This property is either specified as the 'content' keyword or a 'width' keyword where content indicates the automatic sizing while the width represents an absolute length or a percentage.
Syntax
content | <'width'>
Example 1: CSS flex-basis Property
Here in the example below, we are using the flex-basis property with different border styles, colors, and different values. In this case, we have given the flex-basis property value using all the values of this property.
<!DOCTYPE html>
<html>
<head>
<title>The flex-basis property in CSS</title>
<style type="text/css">
.container {
font-family: arial, sans-serif;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.flex {
background: #66f66f;
padding: 10px;
margin-bottom: 50px;
border: 3px solid #2E86BB;
color: white;
font-size: 14px;
text-align: center;
position: relative;
}
.flex:after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
width: 100%;
color: #333;
font-size: 12px;
}
.flex1 {
flex-basis: auto;
}
.flex1:after {
content: 'auto';
}
.flex2 {
flex-basis: max-content;
}
.flex2:after {
content: 'max-content';
}
.flex3 {
flex-basis: min-content;
}
.flex3:after {
content: 'min-content';
}
.flex4 {
flex-basis: fit-content;
}
.flex4:after {
content: 'fit-content';
}
.flex5 {
flex-basis: content;
}
.flex5:after {
content: 'content';
}
.flex6 {
flex-basis: fill;
}
.flex6:after {
content: 'fill';
}
</style>
</head>
<body>
<ul class="container">
<li class="flex flex1">1: flex-basis test</li>
<li class="flex flex2">2: flex-basis test</li>
<li class="flex flex3">3: flex-basis test</li>
<li class="flex flex4">4: flex-basis test</li>
<li class="flex flex5">5: flex-basis test</li>
</ul>
<ul class="container">
<li class="flex flex6">6: flex-basis test</li>
</ul>
</body>
</html>
Output
Example 2: CSS flex-basis Property
Here in the example below, we are using the flex-basis property with different border styles, colors and their different values. In this case, we have given the flex-basis property value as 'min-content' and 'fill'.
<!DOCTYPE html>
<html>
<head>
<title>The flex-basis property in CSS</title>
<style type="text/css">
.container {
font-family: arial, sans-serif;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.flex {
background: pink;
padding: 10px;
margin-bottom: 50px;
border: 3px solid red;
color: white;
font-size: 14px;
text-align: center;
position: relative;
}
.flex:after {
position: absolute;
z-index: 1;
left: 0;
top: 100%;
margin-top: 10px;
width: 100%;
color: deeppink;
font-size: 12px;
}
.flex1 {
flex-basis: min-content;
}
.flex1:after {
content: 'min-content';
}
.flex2 {
flex-basis: fill;
}
.flex2:after {
content: 'fill';
}
.flex3 {
flex-basis: min-content;
}
.flex3:after {
content: 'min-content';
}
.flex4 {
flex-basis: fill;
}
.flex4:after {
content: 'fill';
}
.flex5 {
flex-basis: content;
}
.flex5:after {
content: 'content';
}
.flex6 {
flex-basis: min-content;
}
.flex6:after {
content: 'min-content';
}
</style>
</head>
<body>
<ul class="container">
<li class="flex flex1">Study Tonight</li>
<li class="flex flex2">Study Tonight</li>
<li class="flex flex3">Study Tonight</li>
<li class="flex flex4">Study Tonight</li>
<li class="flex flex5">Study Tonight</li>
</ul>
<ul class="container">
<li class="flex flex6">Study Tonight</li>
</ul>
</body>
</html>
Output
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
29 |
29 |
| Edge |
12 |
12 |
| Firefox |
22 |
22 |
| Internet Explorer |
11 |
11 |
| Opera |
12.1 |
12.1 |
| Safari |
9 |
9 |
| Webview Android |
4.4 |
4.4 |
| Chrome Android |
29 |
29 |
| Firefox Android |
22 |
22 |
| Opera Android |
12.1 |
12.1 |
| IOS Safari |
9 |
9 |
| Samsung Internet |
2.0 |
2.0 |
Conclusion
The initial value for the flex-basis property in CSS is 'auto'. This property is applicable to the flex items which includes in-flow pseudo-elements. It is not an inherited property. Percentage values refer to the inner main size of the flex container. The computed value for this property is the as specified one. The animation type for this property is a length, or a percentage or calc().
