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
Controlling the Dimensions of Flex Items in CSS
To control the dimensions of Flex Items in CSS, use the flex property. Consider flex as the length on flexible items. The flex includes the following properties −
flex-grow − A number is set for the flex grow factor i.e., how much the item will grow relative to the other flexible items.
flex-shrink − A number is set for the flex shrink factor i.e., how much the item will shrink relative to the other flexible items.
flex-basis − The initial size of a flex item.
Syntax
selector {
flex: flex-grow flex-shrink flex-basis;
}
Control the Dimensions of Flex Items With the Shorthand Property
We have set the shorthand property for the flex items. Here, we have values for flex-grow, flex-shrink, and flex-basis −
flex: 2 1 auto;
Example
The following is the code controlling the dimensions of flex items −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
width: 100%;
}
div {
width: 200px;
height: 200px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
flex: 2 1 auto;
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Controlling flex items dimensions</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
A blue first div takes more space (grows by factor 2) while the red and purple second and third divs maintain their original widths.
Control the Dimensions of Flex Items With a Single Value
If a single value without a unit is set for the flex, then it is for the flex-grow property as shown below −
flex: 1;
Example
Let us see an example to control the dimensions of flex items with a single value −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
width: 100%;
}
div {
width: 200px;
height: 200px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
flex: 1;
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Control the Dimensions of flex items with a single value</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
The blue first div grows to fill available space while the red and purple divs remain at their original widths.
Control the Dimensions of Flex Items With Two Values
If two values without a unit is set for the flex, then it is for the flex-grow and flex-shrink property as shown below −
flex: 2 2;
Example
Let us see an example to control the dimensions of flex items −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
width: 100%;
}
div {
width: 200px;
height: 200px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
flex: 2 2;
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Control the Dimensions of flex items with two values</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
The blue first div grows by factor 2 to take available space and will also shrink by factor 2 if the container becomes smaller.
Conclusion
The flex property provides flexible control over flex item dimensions. Use one value for grow, two values for grow and shrink, or three values for complete control including basis size.
231 Views
