CSS Flexbox

Flex Wrap

The flex-wrap property controls whether flex items should stay on a single line or wrap onto multiple lines when there is not enough space in the flex container.

By default, Flexbox tries to keep all items on one line. When many items are present or the container becomes smaller, items may overflow.

The flex-wrap property helps create responsive layouts by allowing items to move to the next line automatically.

Syntax

Flex Wrap Syntax

css

.container {
    display: flex;
    flex-wrap: value;
}

Flex Wrap Example

css

.container {
    display: flex;
    flex-wrap: wrap;
}

This allows flex items to move onto the next line when necessary.

Attributes

Value	Description	Example
nowrap	Default. All items stay on one line	flex-wrap: nowrap;
wrap	Items wrap onto the next line	flex-wrap: wrap;
wrap-reverse	Items wrap in reverse order	flex-wrap: wrap-reverse;

Example

Flex Wrap Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>Flex Wrap Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            width: 500px;
            border: 2px solid black;
            gap: 10px;
            padding: 10px;
        }
        .item {
            width: 120px;
            padding: 20px;
            text-align: center;
            background-color: lightblue;
            border: 1px solid #333;
        }
    </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 class="item">Item 6</div>
    </div>
</body>
</html>

Output

Browser Output

css

The flex items will be arranged in rows
When there is insufficient horizontal space, items will automatically move to the next line
The layout will remain organized and responsive

Item1  Item2  Item3
Item4  Item5  Item6

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Partial

Notes

nowrap is the default Flexbox behavior.
wrap is commonly used in responsive layouts.
wrap-reverse places wrapped rows in reverse order.
Often combined with justify-content, align-items, and gap.
Helps prevent content overflow on smaller screens.

Visual Comparison

nowrap

text

Item1 Item2 Item3 Item4 Item5 Item6

wrap

text

Item1 Item2 Item3
Item4 Item5 Item6

wrap-reverse

text

Item4 Item5 Item6
Item1 Item2 Item3

Conclusion

The flex-wrap property determines how flex items behave when space is limited. By allowing items to wrap onto multiple lines, it helps create flexible, responsive, and user-friendly layouts that adapt to different screen sizes.

PreviousAlign Items NextCSS Grid Container