top | item 39363438

(no title)

thr33 | 2 years ago

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.

discuss

order

zerocrates|2 years 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.

chihuahua|2 years 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.

RheingoldRiver|2 years 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.

pests|2 years 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.

wruza|2 years 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.