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
Avoid wrapping flex items with CSS
The CSS flexbox layout allows you to arrange elements in flexible containers. By default, flex items try to fit in a single line, but when they exceed the container width, they may wrap to new lines. To prevent this wrapping behavior, you can use the flex-wrap property with the nowrap value.
Syntax
.container {
display: flex;
flex-wrap: nowrap;
}
CSS flex-wrap Property
The flex-wrap property controls whether flex items wrap onto multiple lines or stay on a single line. When set to nowrap, all flex items will remain on one line, even if they overflow the container.
Possible Values
| Value | Description |
|---|---|
nowrap |
Default. Flex items stay on a single line |
wrap |
Flex items wrap onto multiple lines if needed |
wrap-reverse |
Flex items wrap onto multiple lines in reverse order |
Example: Basic Flex No-Wrap
The following example demonstrates how to prevent flex items from wrapping using flex-wrap: nowrap −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
display: flex;
flex-wrap: nowrap;
background-color: #f0f0f0;
border: 2px solid #333;
margin: 20px;
padding: 10px;
}
.item {
background-color: #4CAF50;
color: white;
margin: 5px;
padding: 20px;
text-align: center;
min-width: 80px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>
Four green boxes labeled "Item 1", "Item 2", "Item 3", and "Item 4" appear in a single row within a gray container. The items may shrink or overflow but do not wrap to a new line.
Example: Comparison with Wrapping
Here's a comparison showing the difference between nowrap and wrap behavior −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 250px;
display: flex;
background-color: #e8f4fd;
border: 2px solid #2196F3;
margin: 15px;
padding: 10px;
}
.nowrap {
flex-wrap: nowrap;
}
.wrap {
flex-wrap: wrap;
}
.item {
background-color: #FF9800;
color: white;
margin: 3px;
padding: 15px;
text-align: center;
width: 60px;
border-radius: 4px;
}
</style>
</head>
<body>
<h3>No Wrap:</h3>
<div class="container nowrap">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
</div>
<h3>With Wrap:</h3>
<div class="container wrap">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
</div>
</body>
</html>
Two containers are displayed: - "No Wrap" container: Four orange boxes (A, B, C, D) squeezed into a single line, potentially overflowing - "With Wrap" container: The same four boxes, but some wrap to a second line when they don't fit
Conclusion
Using flex-wrap: nowrap ensures flex items remain on a single line, preventing wrapping behavior. This is useful when you want to maintain a horizontal layout regardless of container width, though items may shrink or overflow.
5K+ Views
