The CSS flex property is used for controlling the size and behavior of items within a flexible container. It combines three key properties—flex-grow, flex-shrink, and flex-basis—which determine how items grow, shrink, and set their initial size relative to the available space.
This property is essential for creating responsive layouts that adapt to different screen sizes, making content more dynamic and easier to manage.
Syntax
/* flex: flex-grow flex-shrink flex-basis */
flex: 1 0 auto;
Property Values
| Property | Description |
|---|
flex-grow | Specifies how much an item will grow relative to other items in the container. |
flex-shrink | Determines how much an item will shrink relative to the rest of the flexible items when space is limited. |
flex-basis | Sets the initial size of a flex item. It can be auto, inherit, or a length value like 50%. |
flex-wrap | Controls whether flex items stay on a single line or can wrap onto multiple lines within the container. |
Detailed Explanation of Flex Property Values
1. Flex-Grow
flex-grow specifies how much a flex item will grow relative to other items in the container when extra space is available. The value can be any positive number, with higher values allowing items to grow more.
Example:
.item1 {
flex-grow: 2;
}
.item2 {
flex-grow: 1;
}2. Flex-Shrink
flex-shrink controls how much an item will shrink relative to other items when there is not enough space in the container. The value can be any positive number, with higher values indicating more shrinkage.
Example:
.item1 {
flex-shrink: 3;
}
.item2 {
flex-shrink: 1;
}In this example, .item1 will shrink more than .item2 when space is limited.
3. Flex-Basis
flex-basis sets the initial size of a flex item before any space distribution occurs. It can be a length value (e.g., 100px), percentage (e.g., 50%), or keyword (auto or inherit).
Example:
.item1 {
flex-basis: 200px;
}
.item2 {
flex-basis: 30%;
}CSS Flex Property - Examples
Here are a few examples of the flex property that will help you better understand how it works.
Example 1: Single Value Representation
In this example the CSS flex property creates a flexible container with equal-width items, adjusting their sizes dynamically based on available space within a defined container.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS flex Property </title>
<style>
#Geeks {
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;
}
#Geeks div {
flex: 1;
}
.GFG1 {
background-color: green;
}
.GFG2 {
background-color: lightgreen;
}
.GFG3 {
background-color: darkgreen;
}
</style>
</head>
<body>
<h2>CSS flex Property</h2>
<div id="Geeks">
<div class="GFG1">
GeeksforGeeks
</div>
<div class="GFG2">
Lite Content
</div>
<div class="GFG3">
Special Content
</div>
</div>
</body>
</html>
Output:
Example 2: Using flex-grow, flex-shrink, and flex-basis
This example describes the flex property with the help of the 3 values that represents the flex-grow, flex-shrink & flex-basis properties.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS flex Property </title>
<style>
#Geeks {
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;
}
#Geeks div {
flex: 1 0 auto;
}
.GFG1 {
background-color: green;
}
.GFG2 {
background-color: lightgreen;
}
.GFG3 {
background-color: darkgreen;
}
</style>
</head>
<body>
<h2>CSS flex Property</h2>
<div id="Geeks">
<div class="GFG1">
GeeksforGeeks
</div>
<div class="GFG2">
Lite Content
</div>
<div class="GFG3">
Special Content
</div>
</div>
</body>
</html>
Output:
Supported Browsers
The flex property is widely supported across all modern browsers. Below are the details:
- Google Chrome: 29.0+
- Edge: 12.0+
- Mozilla Firefox: 28.0+
- Safari: 9.0+
- Opera: 17.0+