CSS automatic line wrapping flex-wrap

In web development, it’s common to encounter situations where an element’s content overflows and doesn’t automatically wrap when its parent element’s width exceeds its content. To address this issue, you can use the CSS flex-wrap property to control the automatic wrapping of elements within their parent container.

What is flex-wrap?

flex-wrap is a CSS flex layout property that controls how items in a flex container wrap. By default, items are aligned on a single line. If an item’s length exceeds the width of the parent container, it overflows without wrapping. Setting the flex-wrap property causes items to automatically wrap to fit the width of the parent container.

How to use flex-wrap?

To use the flex-wrap property, first define a flex container. Within that container, the flex-wrap property can take one of the following values:

nowrap: The default value, all items are aligned on a single line without wrapping.
wrap: Items wrap when necessary, with the first line at the top.
wrap-reverse: Items wrap when necessary, with the first line at the bottom.

Here is a sample code that demonstrates how to use the flex-wrap property to achieve automatic line wrapping:

<!DOCTYPE html> 
<html Tutorial">html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Flex Wrap</title> 
<style> 
.container { 
display: flex; 
flex-wrap: wrap; 
width: 300px; 
} 
.item { 
background-color: #f0f0f0; 
margin: 5px; 
padding: 10px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
<div class="item">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="item">You are a minim veniam, so nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="item">Is aute irure dolor in representit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>

</body>
</html>

In the above code, we define a .container container, set the display: flex; and flex-wrap: wrap; properties, and place four .item items within the container, whose content exceeds the container’s width. Run the code and you’ll see that items automatically wrap when necessary to fit the width of the container.

`nowrap` example

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Flex No Wrap</title> 
<style> 
.container { 
display: flex; 
width: 200px; 
} 
.item { 
background-color: #f0f0f0; 
margin: 5px; 
padding: 10px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
<div class="item">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
<div class="item">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
<div class="item">Duis aute irure dolor in reprehenderit in voluptate velit essse cillum dolore eu fugiat nulla pariatur.</div> 
</div> 
</body> 
</html>

In the above example, we removed the flex-wrap attribute of the container, which is nowrap by default. Items are arranged on a single line and do not automatically wrap. As you can see, the item’s content exceeds the width of its container, causing it to overflow without wrapping.

Summary

By using the CSS flex-wrap property, items can automatically wrap to fit the width of their parent container when necessary. This flexible layout makes web development simpler and more efficient. In real-world projects, choosing the appropriate flex-wrap value based on your needs can better display page content and enhance the user experience.