Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
The CSS flex property is a shorthand that combines flex-grow, flex-shrink, and flex-basis properties in a single declaration. It controls how flex items grow, shrink, and their initial size within a flex container.
Syntax
selector {
flex: flex-grow flex-shrink flex-basis;
}
Possible Values
| Property | Description | Default Value |
|---|---|---|
flex-grow |
How much the item should grow (number) | 0 |
flex-shrink |
How much the item should shrink (number) | 1 |
flex-basis |
Initial size before growing/shrinking | auto |
Example
The following example demonstrates how the flex property affects item sizing within a flex container −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
padding: 10px;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
border: 2px solid #333;
}
.special-item {
flex: 2 0 150px;
background-color: lightblue !important;
}
</style>
</head>
<body>
<h3>Flex Container Example</h3>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div class="special-item">Q4</div>
<div>Q5</div>
<div>Q6</div>
</div>
</body>
</html>
A flex container with orange background containing six items. Item Q4 (light blue) is larger than others due to flex: 2 0 150px, meaning it grows twice as much as other items, doesn't shrink, and has an initial width of 150px.
Common Flex Values
| Value | Equivalent | Behavior |
|---|---|---|
flex: 1 |
flex: 1 1 0% |
Equal growth and shrinking |
flex: auto |
flex: 1 1 auto |
Flexible with natural size |
flex: none |
flex: 0 0 auto |
No growing or shrinking |
Conclusion
The flex property is an efficient way to control flex item behavior in one declaration. Use it to define how items grow, shrink, and their base size within flex containers.
Updated on: 2026-03-15T13:07:09+05:30
250 Views
Advertisements