Hacker News Reader

Comment by Waterluvian | Hacker News Reader

Doesn’t matter how many years I work with CSS, I will always confuse flex things like align-content and align-items, like inserting a USB cable wrongly, every single time. Oh and align vs justify.

CSS grid is incredible too. I can’t believe how spoiled we are now with amazing layout options.

View on HN

I've been writing HTML since the mid-90s and have been a professional web developer for a decade. I frequently reference the flexbox[0] and grid guides[1] from CSS Tricks. I have both of the summary sheets printed out and sitting on my desk. They are invaluable resources.

[0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[1] https://css-tricks.com/snippets/css/complete-guide-grid/

I printed out a nice 1-page guide to flexbox a few weeks ago and keep it on my desk, and it's a great reference.

Indeed. The rule for anyone wondering is:

- "justify-" is for the primary axis.

- "align-" for the secondary one

- "-content" is for grid tracks / rows in flex-wrap containers.

- "-items is for individual children (within the row / grid cell)

I would also definitely prefer clearer names.

It's so tempting to want to label them horizontal and vertical etc, but I have to work with Arabic which is all reversed, and then I'm setting up a test localization in Traditional Mongolian, and you realize why these things are named the way they are:

http://khumuunbichig.montsame.mn/index.php?home

CSS actually already accounts for that with it's "inline" and "block" axes. Where inline is the axis along which text flows first (horizontal by default for latin text - although this can be overiden with the writing-mode property), and block is the other axis. Flexbox's main axis controlled by flex-direction is an extra abstraction on top of that.

> http://khumuunbichig.montsame.mn/index.php?home

What's going on with the red text all the way on the left of the news items? It does not appear to be the same thing as the bichig...?

It's the date, I guess, written in a different set of numerals. Kinda like how Arabic writes the numerals different in many places.

You mean you have problem with start/end vs left/right? That's not confusing to me and helpful to use start/end for RTL layouts as well as LTR.

I think they were trying to be generic over “flex-direction”, meaning that attributes like flex-align depends on the “direction” of the parent. It’s very rare that you change the direction and really benefit from that.

I don’t know if that’s the only reason, so I’m not gonna say it was a bad choice. But at least to me, I’m exactly like you in the sense that I can’t remember which one is which. I would have preferred either better naming that references the axis, or simply have the attributes be independent of the parent. Until then, I have to use a cheat sheet.

its multiple directions at play, since the "cardinal directions" of the parent aren't defined by flex-direction alone. If the writing-mode of a parent block formatting context is set to a vertical mode, then flexbox' "row" will run vertically - which is why flexbox directions are "row" and "column", and can only thought of as "vertical/horizontal" in "horizontal-tb" writing mode.

Further, there's no "bottom to top" mode for horizontal scripts, but vertical modes can have a block axis running either ltr or rtl, affecting the direction of the flex cross axis. Which likely leads to the necessity to also abstract "row-reverse" and "column-reverse" directions for the ordering of items.

now as for distribution of items on either axis (whichever direction it may have), referring rows/columns when might become misleading, and also having to address individual rows (align-content) complicates things. Finding another set of terms for flexbox alone might start to become messy, since display:grid and multicolumn layouts will also require these settings.

I don't know the actual origin of align & justify either, but I have the feeling coming up with better terms might not be that easy

Flexbox and grid get all the limelight but let's not forget the usefulness of columns: https://developer.mozilla.org/en-US/docs/Web/CSS/columns

For me it's the flex-basis, -grow, -shrink that I can never get my head around. But I don't need to worry about that very often (which I guess is why it never really sticks in my head).

The way to remember justify is that in flex-row, justify is along the horizontal axis. And, in word processors like msword, you can set the text to "justify" which gives you clean edges on each side. I don't know the history of the word `justify` in flexbox but I would imagine it came from here. So since you know how it works in flex-row, then you know it's primary axis in both.

For items vs content: You always have items no matter what. But you don't need to do anything to the entire content besides justify/align until you have multiple rows with flex-wrap. There's simply no effect that align-content could possibly have here. So items is for individual children, and content is for entire rows.

So tldr: Justify is like the "justify" option in word processors, and align is the opposite one; you always have items, but aligning the content won't change anything until you have 2 rows/cols.

Remember these 2 things and you probably won't forget which is which ever again.

(That said, I do often forget if flex starts out row or column, but that's relatively unimportant to know, because the way I get around this is by always adding the direction when I say "display:flex".)

Haha USB-C solves this for cables. What would be the analog for page style?

WYSIWYG editors like Microsoft Frontpage :)

Actually though, not really an analog, but surprisingly something not many people are aware enough of - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical...

Helps a lot when working with applications that need to support both LTR and RTL languages.

I always use chrome inspector to define my css for an element. It has a nice flexbox editor. Just play around. Copy css and paste in your project.

the years are probably part of the problem

there are so many shims and polyfills amongst actual solutions now

Reply on news.ycombinator.com