Theory
Theory
Comments

The flex-wrap property, reverse overflow

If you have allowed flex items to overflow, then the rows of items will be arranged along the cross axis. The first row is located at the start of the cross axis, and the last one is located at the end. But only the wrap value works this way.

If you assign the wrap-reverse value for flex-wrap, then the items will overflow, and the rows will be arranged in reverse order, where the first row is located at the end of the cross axis and the last row is located at the start.

Let’s add some more cats to our container room and test overflowing them onto a new line in the reverse cross axis direction.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Reverse overflow</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="house"> <div class="room"> <div class="rug simba"></div> <div class="rug rudolf"></div> <div class="rug muffin"></div> <div class="rug massimo"></div> </div> </body> </html>

CSS

.room { display: flex; flex-wrap: wrap; } .rug { width: 120px; }

Goalscompleted

Add two more cats: Marty (a block with the classes rug and marty), and Blacky (a block with the classes rug and blacky),
and then set flex items to overflow onto a new line in the reverse direction (wrap-reverse) for .room,
and then set a width of 180px for all rugs.

The flex-wrap property, reverse overflow

Comments

Log in

Sign up

Restore access