It’s key to understand the main and cross axes in flexbox. Switch the layout from row to column with flex-direction.

justify-content and align-items and other features entirely depend on flex direction

flex-direction: row; (default) main axis

flex-direction: row; cross axis

flex-direction: column;

flex-direction: row-reverse;

flex-direction: column-reverse;