CSS flex-wrap property
The flex-wrap property in CSS controls how flex items are wrapped within a flex container. When there isn't enough space in a single line to fit all the flex items, flex-wrap determines whether the items should wrap onto multiple lines or stay on one line. This property is particularly useful for creating responsive layouts that adjust to different screen sizes.
Basic Usage
The flex-wrap property is applied to a flex container and affects the wrapping behavior of its flex items.
selector {
flex-wrap: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap; /* Change this value to see different wrapping behavior */
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightcoral;
border: 1px solid red;
}
</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 class="item">Item 5</div>
</div>
</body>
</html>
In this example, the .container uses flex-wrap to determine how the items are wrapped within it.
Values for flex-wrap
1. nowrap (default)
- Description: All flex items are placed on a single line. They do not wrap, and if there is not enough space, the container will overflow.
- Use Case: Use this value when you want all items to stay on one line regardless of the container size.
.container {
flex-wrap: nowrap; /* No wrapping; items will overflow if necessary */
}
2. wrap
- Description: Flex items wrap onto multiple lines if necessary. Items will be placed on new lines if there is not enough space in the container.
- Use Case: Use this value for responsive designs where you want items to adjust to fit the available space.
.container {
flex-wrap: wrap; /* Items will wrap onto new lines if needed */
}
3. wrap-reverse
- Description: Flex items wrap onto multiple lines in reverse order. New lines are added above the previous lines.
- Use Case: Use this value to reverse the order of lines when wrapping, which can be useful for specific design effects.
.container {
flex-wrap: wrap-reverse; /* Items will wrap onto new lines in reverse order */
}
Practical Examples
Example 1: Wrapping Items
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
border: 1px solid blue;
}
</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 class="item">Item 5</div>
</div>
</body>
</html>
In this example, the items wrap onto multiple lines if there isn’t enough space in a single line.
Example 2: No Wrapping
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: nowrap;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightgreen;
border: 1px solid green;
}
</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 class="item">Item 5</div>
</div>
</body>
</html>
In this example, the items do not wrap. If the container is too small to fit all items on one line, the items will overflow the container.
Example 3: Wrapping in Reverse Order
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap-reverse;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightcoral;
border: 1px solid red;
}
</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 class="item">Item 5</div>
</div>
</body>
</html>
Here, items will wrap onto new lines in reverse order, meaning the latest items will appear at the top of the container.
Interaction with Other Flexbox Properties
flex-direction: Determines the direction of the main axis, which affects how items are wrapped. For example, ifflex-directionis set torow, wrapping occurs horizontally, whereas if it’s set tocolumn, wrapping occurs vertically.align-content: Controls the alignment of flex lines within the container. This is relevant whenflex-wrapis used, as it affects how wrapped lines are positioned within the container.
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* Aligns wrapped lines with space between them */
}
align-items: Aligns items within each flex line. This property works with or without wrapping.
.container {
display: flex;
flex-wrap: wrap;
align-items: center; /* Aligns items within each line to the center */
}