flex-wrap
Last Updated: March 25, 2022
When the number of items in a row does not fit the length of the container, they try to move to the next row. You can use flex-wrap to control how those child elements wrap inside the container.
flex-wrap:no-wrap
this is the default value and elements will fit a single line.
flex-wrap:wrap
fits on to multiple lines.
flex-wrap:wrap-reverse
This will fit multiple lines if necessary. But here, it starts from bottom to top.

The default value of the flex-wrap is nowrap
so all the child elements try to fit into one line. But you can change the child elements to wrap to the next line