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