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
How flexible items can be of the same length regardless of its content in CSS?
The CSS flex property allows you to create flexible items of equal length regardless of their content. This is achieved by controlling how flex items grow, shrink, and their initial size within a flex container.
Syntax
selector {
flex: flex-grow flex-shrink flex-basis;
}
Flex Properties
The flex property is a shorthand that combines three individual properties
Flex-grow
This property defines how much a flex item should grow relative to other flex items when there's extra space in the container. The default value is 0.
Flex-shrink
This property defines how much a flex item should shrink when there's not enough space in the container. The default value is 1.
Flex-basis
This property sets the initial main size of a flex item before free space is distributed. It can be set to auto, content, or a specific length value.
Creating Equal-Length Items
To make all flex items the same length regardless of content, set flex: 1 on each item. This makes each item grow equally to fill available space.
Example: Equal Length Flex Items
The following example creates three flex items of equal width despite having different content amounts
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
width: 600px;
height: 200px;
border: 2px solid #333;
gap: 10px;
padding: 10px;
}
.flex-item {
flex: 1;
padding: 20px;
text-align: center;
color: white;
font-weight: bold;
}
.item1 { background-color: #ff6b6b; }
.item2 { background-color: #4ecdc4; }
.item3 { background-color: #45b7d1; }
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">Short text</div>
<div class="flex-item item2">This is a longer piece of content</div>
<div class="flex-item item3">Medium length</div>
</div>
</body>
</html>
Three equal-width colored boxes appear in a row, each taking up exactly one-third of the container width despite having different amounts of text content.
Example: Using Specific Flex Values
You can also use specific values to control the growth ratios
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
width: 600px;
height: 150px;
border: 2px dashed #666;
padding: 10px;
}
.flex-item {
padding: 15px;
margin: 5px;
text-align: center;
color: white;
font-size: 14px;
}
.item1 {
flex: 1 0 auto;
background-color: #e74c3c;
}
.item2 {
flex: 2 0 auto;
background-color: #3498db;
}
.item3 {
flex: 1 0 auto;
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">Flex: 1</div>
<div class="flex-item item2">Flex: 2 (twice as wide)</div>
<div class="flex-item item3">Flex: 1</div>
</div>
</body>
</html>
Three colored boxes appear where the middle blue box is twice as wide as the red and green boxes on either side, demonstrating proportional flex growth.
Conclusion
The CSS flex property provides powerful control over item sizing in flexbox layouts. Using flex: 1 creates equal-length items regardless of content, while different flex values allow for proportional sizing based on your design needs.
441 Views
