undefined | Better HN

0 pointsthr332y ago0 comments

justify/align and content/items have specific meanings and the 'intuitive' naming most people expect - horizontal, vertical - completely betrays the powerful elegance of the flex model.

justify always refers to the main axis of a box model element, and align refers to the cross axis. by default, flex-direction is set to row, so justify often means horizontal and align often means vertical.

until it doesn't of course. when we switch tbe flex direction from row to column which is a very handy trick for easy responsive on small devices, the main axis is now vertical and the cross axis is now horizontal.

0 comments

zerocrates2y ago

There's just always going to be confusion because both pairs are basically synonyms: justify and align; items and content (what's the content of a flex container? flex items).

I buy the value in having them be main-axis and cross-axis properties rather than horizontal/vertical by name, but I don't know that I buy the justify/align distinction to represent that as being meaningful or memorable.

chihuahua2y ago

It's very easy to remember all this, if you can just memorize the acronym AMIJAMITCOE ("Ami-Jamit-Coe"): A monad is just a monoid in the category of endofunctors.

RheingoldRiver2y ago

My mnemonic for justify vs align is to picture the "justification" options in a word processor. you can justify content to the side of the primary axis when it's written right-to-left. so, justify is main axis, and the one that's not justify (align) is the one that's not main axis (cross axis).

What I don't remember ever is does flex default to row or column; so I write a lot of unnecessary `flex-direction:row;` but if you are fine with always specifying a direction, the default doesnt really matter either.

crazygringo2y ago

Which is even more confusing because that's not the terminology used in word processors.

Word processors have four modes of alignment -- left, center, right, and justified. Justified means stretching out to both edges.

There's no such thing as justifying content in a particular direction. And justifying something to the center is purely nonsensical.

pests2y ago

Its similar with changing "left" and "right" to be "start" and "end" because we built in a lot of assumptions with LTR languages that don't apply to RTL.

wruza2y ago

They could leave the elegance by calling it align-x and align-y and turn-right. Or make them independent of “direction”. Or allow both ways so people could use them in corresponding situations. Instead they chose to satisfy the most useless case of a pseudo-turnable container, which makes zero sense.

j / k navigate · click thread line to collapse