Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Setting a Fixed Width for Items in CSS Flexbox
To set a fixed width for items in flexbox, use the flex property. The flex is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties as shown below. The flex item is growable, can’t shrink, and initial length is set to 100% −
flex: 1 0 100%;
Above, shows −
flex-grow is 1 i.e., growable
flex-shrink is 0 i.e., can’t shrink
flex-basis is 100%
Syntax
The syntax of CSS flex property is as follows −
Selector {
flex: /*value*/
}
As shown above, the value can be −
flex-grow
flex-shrink
flex-basis
Example
The following examples illustrate CSS flex property.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
padding: 4%;
}
.d1 {
background: hotpink;
flex: 0 20 20px;
}
.d2 {
background: greenyellow;
flex: 1;
}
.d3 {
background: tomato;
flex: 1;
}
</style>
</head>
<body>
<div class="demo">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
</html>
Example
Let us see another example to set a fixed width for the flex-items. We have set the fixed width for the 2nd div −
#d2 {
border: 5px groove greenyellow;
width: 66px;
}
Let us see the example −
<!DOCTYPE html>
<html>
<style>
div {
display: flex;
border-radius: 2%;
background-color: linen;
height: 50px;
}
#d1 {
border: 5px solid orangered;
padding: 2%;
flex: auto;
}
#d2 {
border: 5px groove greenyellow;
width: 66px;
}
#d3 {
padding: 5%;
border: 5px ridge hotpink;
}
#d4 {
height: 100px;
border: 5px solid magenta;
}
</style>
<body>
<div>
<div id="d1">Auto Resize</div>
<div id="d2">Fixed Width</div>
<div id="d3"></div>
</div>
<div id="d4">Last Div</div>
</body>
</html>
Updated on: 26-Dec-2023
1K+ Views
Advertisements