Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

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().