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
How to Make Flex Items Take the Content Width?
Flexbox is a powerful layout tool that allows us to align items within a container dynamically. However, sometimes you may want a flex item to take up only as much width as its content, rather than stretching to fill the available space within the container. In this article, we'll go over different techniques to make specific items within a flex container take up only the space needed for their content, without stretching to fill the available space.
Approaches to Make Flex Items Take the Content Width
- Using CSS align-self Property
- Using CSS flex for Individual Items
- Using width and flex-basis Property
- Using inline-flex for the Flex Container
Using CSS align-self Property
By default, flex items stretch to fill the available space along the main axis. You can override this behavior by setting align-self: flex-start or align-self: flex-end, which causes the item to align with the beginning or end of the container without stretching to fill.
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.flex-container {
display: flex;
gap: 10px;
background-color: #f0f0f0;
}
.flex-item {
flex: 1;
/* Will stretch */
background-color: #add8e6;
padding: 10px;
}
.auto-width {
align-self: flex-start;
/* Or use align-self: flex-end */
padding: 10px;
background-color: #90ee90;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">
Stretch Item
</div>
<div class="flex-item auto-width">
Auto Width
</div>
</div>
</body>
</html>
Output
Using CSS flex for Individual Items
Using flex: 0 0 auto stops the item from growing or shrinking, making it take only the width of its content.
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.flex-container {
display: flex;
gap: 10px;
background-color: #f0f0f0;
}
.flex-item {
flex: 1;
/* Will stretch */
background-color: #add8e6;
padding: 10px;
}
.fixed-width {
flex: 0 0 auto;
/* Prevents stretching */
padding: 10px;
background-color: #90ee90;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Stretch Item</div>
<div class="flex-item fixed-width">Auto Width</div>
</div>
</body>
</html>
Output
Using width and flex-basis Property
The flex-basis defines the initial main size of a flex item before the remaining space is distributed. By setting width: auto, the item will take only the space it needs.
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.flex-container {
display: flex;
gap: 10px;
background-color: #f0f0f0;
}
.flex-item {
flex: 1;
/* Will stretch */
background-color: #add8e6;
padding: 10px;
}
.content-width {
flex-basis: auto;
width: auto;
/* Set width to auto */
padding: 10px;
background-color: #90ee90;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Stretch Item</div>
<div class="flex-item content-width">Auto Width</div>
</div>
</body>
</html>
Output
Using inline-flex for the Flex Container
By setting the container to display: inline-flex, it behaves like an inline-block element, allowing flex items to size based on their content without stretching to fill the entire width.
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.inline-flex-container {
display: inline-flex;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.inline-flex-item {
background-color: #90ee90;
padding: 10px;
}
</style>
</head>
<body>
<div class="inline-flex-container">
<div class="inline-flex-item">Auto Width Item 1</div>
<div class="inline-flex-item">Auto Width Item 2</div>
</div>
</body>
</html>
Output
1K+ Views
