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
How to set the size of specific flex-item using CSS?
In CSS, we can control the size of specific flex items using various flex properties. The CSS flexbox is used to create responsive layouts that adapt to different screen sizes by adjusting item dimensions and positioning.
Syntax
selector {
flex-grow: number;
flex-shrink: number;
flex-basis: length | percentage | auto;
flex: flex-grow flex-shrink flex-basis;
}
Key Flex Properties
| Property | Description |
|---|---|
flex-grow |
Controls how much a flex item should grow relative to other items |
flex-shrink |
Controls how much a flex item should shrink relative to other items |
flex-basis |
Sets the initial main size of a flex item before free space is distributed |
flex |
Shorthand for flex-grow, flex-shrink, and flex-basis |
Example 1: Using Individual Properties
The following example demonstrates flex-grow, flex-shrink, and flex-basis properties
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 2px solid #333;
padding: 10px;
gap: 10px;
}
.box {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
.box1 {
flex-grow: 2;
}
.box2 {
flex-shrink: 0;
flex-basis: 150px;
}
.box3 {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">Grows 2x</div>
<div class="box box2">Fixed 150px</div>
<div class="box box3">Grows 1x</div>
</div>
</body>
</html>
Three green boxes are displayed horizontally. The first box takes up twice as much extra space as the third box, while the middle box maintains a fixed width of 150px.
Example 2: Using Flex Shorthand
The following example uses the flex shorthand property to control item sizes
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 2px solid #333;
padding: 10px;
gap: 10px;
}
.box {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
}
.box1 {
flex: 1 1 100px;
}
.box2 {
flex: 2 1 200px;
}
.box3 {
flex: 1 2 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">flex: 1 1 100px</div>
<div class="box box2">flex: 2 1 200px</div>
<div class="box box3">flex: 1 2 150px</div>
</div>
</body>
</html>
Three blue boxes are displayed. The middle box grows twice as fast as the others, while the third box shrinks twice as fast when space is limited. Each box has a different initial size.
Example 3: Creating Specific Item Sizes
The following example shows how to create specific proportional sizes
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 2px solid #333;
padding: 10px;
gap: 10px;
height: 200px;
}
.box {
background-color: #FF9800;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.small {
flex: 1;
}
.medium {
flex: 2;
}
.large {
flex: 3;
}
</style>
</head>
<body>
<div class="container">
<div class="box small">1 unit</div>
<div class="box medium">2 units</div>
<div class="box large">3 units</div>
</div>
</body>
</html>
Three orange boxes in a 1:2:3 ratio. The first box takes 1/6 of the space, the second takes 2/6 (1/3), and the third takes 3/6 (1/2) of the available space.
Conclusion
Flex properties provide precise control over individual flex item sizes. Use flex-grow, flex-shrink, and flex-basis individually or the flex shorthand to create responsive layouts with specific proportions.
Updated on: 2026-03-15T18:04:38+05:30
276 Views
Advertisements