Hacker News new | ask | show | jobs
by cynicalpeace 534 days ago
justify-content should be called main-axis. align-items should be called cross-axis.

Once you understand this, all of flexbox becomes easy.

2 comments

I have issues with "row" vs "column"

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.

I've deeply internalised that with flexbox, when using rows or columns that I need to visualise a row that holds multiple columns. And for a column, it's got multiple rows inside it. I literally have to visualise this in my head to remember the correct property.
Is this something to understand or memorize?
Yes- justify-content: center will center items along the flex direction. For example, if your flex-direction is "row" then it will center your items in the middle of the row horizontally. align-items: center will center your items in the middle of the row vertically.

For example, justify-content: center and flex-direction: row centers items the same as align-items: center and flex-direction: column