CSS Flexbox - flex-wrap Property
CSS flex-wrap property determines whether flex items should remain on a single line or are allowed to wrap onto multiple lines. When wrapping is allowed, it determines the direction in which lines are stacked.
Possible Values
-
nowrap − Default Value. The flex items are placed in a single line, which may extend beyond the flex containers. Depending on the flex-direction value, the cross-start is defined by the start or before.
-
wrap − The flex items break into multiple lines. The cross-start is the same as the start or before, depending on the flex-direction value, while the cross-end is the reverse of the given cross-start.
-
wrap-reverse − It wraps flex items similar to wrap, but the positions of cross-start and cross-end are swapped.
Applies to
Flex containers.
Syntax
flex-wrap: nowrap|wrap|wrap-reverse;
CSS flex-wrap - nowrap Value
The following example demonstrates with flex-wrap: nowrap property, the flex items will remain on the same line when the browser window is resized horizontally, even if they overflow the flex container −
<html> <head> <style> .flex-container { display: flex; flex-wrap: nowrap; background-color: green; } .flex-container>div { background-color: yellow; padding: 10px; margin: 10px; width: 50px; height: 50px; } </style> </head> <body> <h3>As you resize the browser window, flex items will remain on a single line.</h3> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> </div> </body> </html>
CSS flex-wrap - wrap Value
The following example demonstrates that flex-wrap: wrap property allows flex items to break into multiple lines when they cannot not fit in a single line −
<html> <head> <style> .flex-container { display: flex; flex-wrap: wrap; background-color: green; } .flex-container>div { background-color: yellow; padding: 10px; margin: 10px; width: 50px; height: 50px; } </style> </head> <body> <h3>As you resize the browser window, flex items should move to a new line inside their container.</h3> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> </div> </body> </html>
CSS flex-wrap - wrap-reverse
The following example demonstrates that flex-wrap: wrap-reverse property arranges the flex items in multiple lines, and wraps flex items in reverse order −
<html> <head> <style> .flex-container { display: flex; flex-wrap: wrap-reverse; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 50px; height: 50px; } </style> </head> <body> <h3>As you resize the browser window, flex items should move to a new line in reverse order.</h3> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> <div>Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> <div>Flex item 7</div> </div> </body> </html>
To Continue Learning Please Login
Login with Google