CSS flex Property
The flex property in CSS is the shorthand property that sets how any flex item would grow or shrink in order to fit in the space available in its flex container.
This property is a shorthand property for the flex-grow, flex-shrink, and flex-basis. The flex property may be specified using one to three values- one-value syntax should contain the value of one number, the two-value syntax should contain a number as flex-grow and a number as flex-basis and the three-value syntax should contain a number for flex-grow, a number for flex-shrink and a width value for flex-basis.
Syntax
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Example 1: CSS flex Property
In the example below, we are using the flex property with different table or cell colors, border styles, and their different values.
In this case, we have given the flex value of the object as 'auto'. You may give any title to your program and you can also indent your text and object according to your selection of colors or styles or variants, etc.
<!DOCTYPE html>
<html>
<head>
<title>The flex property in CSS</title>
<style type="text/css">
#flex-container {
display: flex;
flex-direction: row;
border: 2px solid red;
background-color: pink;
}
#flex-container > .flex-item {
flex: auto;
border: 2px solid purple;
background-color: yellow;
}
#flex-container > .raw-item {
width: 5rem;
border: 2px solid green;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="flex-container">
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
</body>
</html>
Output
Example 2: CSS flex Property
Here, in the example below, we are using the flex property with different table or cell colours, border styles and their different values. In this case, we have given the flex value of the object as '40% and 20%'.
<!DOCTYPE html>
<html>
<head>
<title>The flex property in CSS</title>
<style type="text/css">
#flex-container {
display: flex;
flex-direction: row;
border: 2px solid red;
background-color: pink;
}
#flex-container > .flex-item {
flex: 40%;
border: 2px solid purple;
background-color: gray;
}
#flex-container > .raw-item {
width: 5rem;
border: 2px solid green;
background-color: skyblue;
flex: 20%;
}
</style>
</head>
<body>
<div id="flex-container">
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
</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 |
20 |
20 |
| Internet Explorer |
11 |
11 |
| Opera |
12.1 |
12.1 |
| Safari |
9 |
9 |
| Webview Android |
4.4 |
4.4 |
| Chrome Android |
29 |
29 |
| Firefox Android |
29 |
29 |
| Opera Android |
12.1 |
12.1 |
| IOS Safari |
9 |
9 |
| Samsung Internet |
2.0 |
2.0 |
Conclusion
The initial value for the flex property in CSS for the flex-grow is zero, for the flex-shrink is one and for the flex-basis is 'auto'. This property is applicable to the flex items which also includes the in-flow pseudo elements. It is not an inherited property. The computed value for all the constituent properties of the flex property is the as specified one. The animation type for the flex-grow and flex-shrink is 'a number' and for the flex-basis is a length, percentage or a calc().
