Does flex-direction sometimes trip you up?
Does it make you ask, "Which way did he go George?"
I came across a conversation on twitter a few weeks back. (sorry I can't find the link) where someone expressed some confusion over flex-direction. Some of the replies were chastising them over it which I think was unfair. Later I saw another post by Jen Simmons that asked people what confused them about flexbox and some of the replies mentioned flex-direction.
This made me think about knowledge and about things we take for granted as "known". The spec defines flex-direction as
The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.
I'm not advocating for changing the spec or anything. I'm just acknowledging that sometimes things aren't as simple as we think they are. And when we realize that, we can stop judging others for getting confused.
How it's defined in the spec doesn't always stick when people go to write their css. I know I often have to set both align-items and justify-content, only to adjust them after I see which one I need to alter. Those two properties effect the child elements differently depending on the flex-direction.
I think the main hangup people have is that "row" makes the parent a row, so all the child elements are actually in columns in that row. Conversely, "column" sets the parent to be a column and the children fall into their own rows. I think the issue here is what we see vs what we know. We see columns when we set flex-direction: row and our brains process that as contradictory.
CSS-Tricks has A Complete Guide to Flexbox and there are lots of flexbox cheat sheets and examples that you could find with a simple search.
There really is no simple way to remember it other than rows go left-to-right and columns go top-to-bottom.
Speaking of examples, here's my contribution:
Top comments (0)