Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 Fixed Width for Items in CSS Flexbox
To set a fixed width for items in CSS flexbox, we will be understanding two different approaches. It is useful when you want some specific items to have a fixed width even if there is space available.
In this article, we are having three div items wrapped inside a div container. Our task is to set fixed width for items in CSS flexbox.
Approaches to Set Fixed Width for Items in CSS Flexbox
Here is a list of approaches for setting a fixed width for items in CSS flexbox which we will be discussing in this article with stepwise explaination and complete example codes.
Setting Fixed Width using flex-basis Property
In this approach for setting a fixed width for items in CSS flexbox, we have used flex-basis property along with flex-grow and flex-shrink property. We can also use CSS flex property which is a shorthand property for all the three property we have used.
- We have used container class to make the container a flexbox container.
- To design the flex items, we have set it's background-color and text color property, set padding and margin for distance between the boxes and centered the text using CSS text-align property.
- For setting fixed width of items, we have used "flex-basis: 200px;" specifying the fixed width of flex items along with flex-shrink and flex-grow which doesn't allow flex items to shrink and expand it's width respectively.
Example
Here is a complete example code implementing above mentioned steps for setting a fixed width for items in CSS flexbox using CSS flex-basis property.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
}
.items {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 200px;
padding: 20px;
background-color: #071952;
color: white;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<h3>
Setting a Fixed Width for Items in CSS Flexbox
</h3>
<p>
In this example, we have used CSS <strong>flex-
basis</strong> property to set a fixed width for
items in CSS flexbox.
</p>
<div class="container">
<div class="items">Item 1</div>
<div class="items">Item 2</div>
<div class="items">Item 3</div>
</div>
</body>
</html>
Setting Fixed Width using min-width Property
In this approach for setting a fixed width for items in CSS flexbox, we have used CSS min-width property. It sets the minimum width of the element.
- We have used same approach as approach first to make a flex container and to design the flex items.
- Then, we have used "min-width: 200px;" property which set it's minimum width setting a fixed width of the flex item.
Example
Here is a complete example code implementing above mentioned steps for setting a fixed width for items in CSS flexbox using CSS min-width property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
}
.items {
min-width: 200px;
padding: 20px;
background-color: #071952;
color: white;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<h3>
Setting a Fixed Width for Items in CSS Flexbox
</h3>
<p>
In this example, we have used CSS <strong>min-
width</strong> property to set a fixed width for
items in CSS flexbox.
</p>
<div class="container">
<div class="items">Item 1</div>
<div class="items">Item 2</div>
<div class="items">Item 3</div>
</div>
</body>
</html>
Conclusion
In this article, we understood how to set a fixed width for items in CSS flexbox. We have used two methods which are: by using flex-basis with flex-grow and flex-shrink or simply using flex shorthand property and by using CSS min-width property.
4K+ Views
