Flexbox has a main and cross axis. The main axis is defined by the flex-direction property, which has four possible values:
row (default): horizontal axis with flex items from left to right
row-reverse: horizontal axis with flex items from right to left
column: vertical axis with flex items from top to bottom
column-reverse: vertical axis with flex items from bottom to top
Note: The axes and directions will be different depending on the text direction. The values shown are for a left-to-right text direction.
Try the different values to see how they affect the layout.
When you are done, set an explicit flex-direction of row on the .gallery element.