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 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.
Syntax
/* Method 1: Using align-self */
.item {
align-self: flex-start;
}
/* Method 2: Using flex shorthand */
.item {
flex: 0 0 auto;
}
/* Method 3: Using flex-basis and width */
.item {
flex-basis: auto;
width: auto;
}
/* Method 4: Using inline-flex container */
.container {
display: inline-flex;
}
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
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.flex-container {
display: flex;
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
flex: 1;
background-color: #add8e6;
padding: 10px;
text-align: center;
}
.auto-width {
align-self: flex-start;
padding: 10px;
background-color: #90ee90;
flex: none;
}
</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>
A flex container with two items: a blue item that stretches to fill available space, and a green item that takes only its content width.
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. The three values represent flex-grow, flex-shrink, and flex-basis respectively.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.flex-container {
display: flex;
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
flex: 1;
background-color: #add8e6;
padding: 10px;
text-align: center;
}
.fixed-width {
flex: 0 0 auto;
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>
A flex container showing one item stretching to fill space and another maintaining its natural content width.
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 and flex-basis: auto, the item will take only the space it needs for its content.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.flex-container {
display: flex;
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
flex: 1;
background-color: #add8e6;
padding: 10px;
text-align: center;
}
.content-width {
flex-basis: auto;
width: auto;
flex-grow: 0;
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>
A flex container with items where one stretches and the other maintains its natural content width using flex-basis and width properties.
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 of the parent container.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<p>Text before container</p>
<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>
<p>Text after container</p>
</body>
</html>
An inline-flex container that only takes the width of its content, flowing inline with surrounding text, containing two green items sized to their content.
Conclusion
These four methods provide different approaches to control flex item width. Use flex: 0 0 auto for the most reliable content-based sizing, or display: inline-flex when you want the entire container to size based on content.
2K+ Views
