The value wrap tells the flex container to allow flex items to wrap onto multiple lines if they don’t fit in a single line. This is useful for creating responsive layouts where items can wrap into new rows or columns as needed.
When you use flex-wrap: wrap;, the items will wrap onto new lines when there isn’t enough space in the container’s current line. For example, if the container width is too narrow to fit all items in one row, the items will automatically wrap to the next row, creating a grid-like appearance.
This is particularly useful for creating responsive designs where the layout needs to adapt to different screen sizes or container widths.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 10px; /* Optional: adds space between items */
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
.item {
background-color: #4caf50;
color: white;
padding: 20px;
font-size: 20px;
text-align: center;
flex: 1 1 100px; /* Allows items to grow and shrink, and sets a base size */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>