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
Avoid Wrapping Flex Items with CSS
The majority of developers and designers employed various methods to produce responsive and flexible layouts prior to the release of the Flexbox layout concept. These methods consist of tables, and floats. Although one can still use these methods, most designers now use the Flexbox model.
Users can arrange and organize their webpages either vertically or horizontally with CSS flexbox, which results in visually attractive and easily navigable websites. Flexbox is actually a CSS layout module rather than just a property. In this article we are going to learn about how to avoid wrapping flex items with CSS, this can be done by using the flex-wrap property with nowrap value to avoid flex-items to wrap.
CSS flex-wrap property
You can control whether flex elements are wrapped onto many lines or a single line using the CSS flex-wrap property. The ability to adjust the stacking direction of lines is made possible via the flex-wrap property. It is employed to specify a single or multiple lines format for flex items contained within the flex container.
Syntax
Following is the syntax for CSS flex-wrap property −
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
Example
Let's look at the following example, where we are going to use the flex-wrap property with the no wrap value to avoid wrapping.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #EAFAF1;
font-family: verdana;
}
section {
width: 170px;
display: flex;
flex-wrap: nowrap;
background-color: #F9E79F;
margin: 200px;
padding: 8px;
}
div {
background-color: #CCD1D1;
color: #DE3163;
margin: 6px;
padding: 9px;
border-radius: 10px;
}
</style>
</head>
<body>
<section>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</section>
</body>
</html>
When we run the above code, it will generate an output consisting of the div box used with no wrap displayed on the webpage.
Example
Considering another scenario, where we are going to use the flex-wrap property with the no wrap value to avoid wrapping.
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
height: 250px;
font: 50px/100px verdana;
text-align: center;
color: #DE3163;
display: flex;
flex-wrap: no wrap;
}
.tp div {
height: 60%;
width: 60%;
}
.x {
background: #E8DAEF;
}
.x1 {
background: #D6EAF8;
}
.x2 {
background: #D5F5E3;
}
</style>
</head>
<body>
<div class="tp">
<div class="x">A</div>
<div class="x1">B</div>
<div class="x2">C</div>
</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the div box applied with no wrap displayed on the webpage.
4K+ Views
