CSS flex-wrap Property

CSS flex-wrap specifies whether flex items are forced into a single line or wrapped across multiple lines. The flex-wrap property enables you to control the direction in which lines are stacked. It is used to specify whether flex items inside the flex container should be in a single line or multiline format.

Syntax

flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 150px;
        height: 150px;
        border: 1px solid #212b36;
        display: flex;
        flex-wrap: wrap;
    }
    .box div {
        width: 50px;
        height: 50px;
    }
</style>
</head>
<body>

<div class="box">
    <div style="background-color:#00ab55;"></div>
    <div style="background-color:#ff4842;"></div>
    <div style="background-color:#ffc107;"></div>
    <div style="background-color:#1890ff;"></div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
nowrap	The default value. This specifies that the flexible items will not be wrapped.
wrap	This specifies that the flexible items will be wrapped if necessary.
wrap-reverse	Specifies that the flexible items will wrap in reverse order if necessary.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
flex-wrap	29.0 21.0 -webkit-	28.0 18.0 -moz-	9.0 6.1 -webkit-	11.0	17.0

flex-shrink

float

CSS flex-wrap Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us