wrap-reverse is a flex-wrap value for sending overflowing flex items onto multiple lines at the end of the cross axis instead of shrinking everything into one line. section 12.2
Think of flex-wrap as choosing what happens when the container gets crowded:
- nowrap keeps items on one row or column and is the default. section 12.2
- wrap creates as many rows or columns as needed. section 12.2
- wrap-reverse also creates multiple lines, but places them at the end of the cross axis. section 12.2
Try the reversed wrap
Set a flex container to flex-wrap: wrap-reverse. Then resize the container or add enough items to force another line. Compare its line placement with wrap in the interactive Playground. section 12.2
container {
display: flex;
flex-wrap: nowrap|wrap|wrap-reverse;
}
Use the flex-wrap declaration as a quick reminder of the three available choices. section 12.2
