justify-content should be called main-axis. align-items should be called cross-axis.
Once you understand this, all of flexbox becomes easy.
Once you understand this, all of flexbox becomes easy.
If you choose "row", I see 1 row and 5 columns. So if I want more columns, I need to choose "row".
If you choose "column", I see 5 rows and 1 column. So if I want more rows, I need to choose "column".
When the content is wrapped, the setting is more intuitive, but most of the time, you don't want to use the wrap feature.
For example, justify-content: center and flex-direction: row centers items the same as align-items: center and flex-direction: column