Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Flexbox Froggy

flexboxfroggy.com

Post reply on HN
Print view View original

61–70 of 72 posts

Re: Flexbox Froggy

#61

Post by ekun »

frob wrote: post #33
Waterluvian wrote: post #18

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.

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.

Re: Flexbox Froggy

#62

Post by qingcharles »

thaumasiotes wrote: post #59
qingcharles wrote: post #44

Earlier quoted context omitted.

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

> 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.

Re: Flexbox Froggy

#63

Post by pikelet »

Waterluvian wrote: post #18

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.

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).

Re: Flexbox Froggy

#64

Post by krsdcbl »

klabb3 wrote: post #28
Waterluvian wrote: post #18

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.

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…

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

Re: Flexbox Froggy

#65

Post by yieldcrv »

Waterluvian wrote: post #18

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.

the years are probably part of the problem

there are so many shims and polyfills amongst actual solutions now

Re: Flexbox Froggy

#66

Post by krsdcbl »

dsego wrote: post #14
sirius87 wrote: post #13

This is very useful. I always end up Googling vertical align for flexbox. In a rush, what would help me refresh flexbox knowledge is being able to drag and drop the frog, snapped to a 3x3 grid, and get the flexbox CSS code as output. Still a very thoughtful tutorial. (EDIT: The reason I said the above is I've personally given up on keeping up with new CSS stuff. Having written CSS off and on since IE7 days, basically…

No tricks anymore, not much to keep up, flexbox and grid are the end-game. And for most UI cases flexbox is all you need, it's basically stack/group (or vbox/hbox), so you can arrange items vertically or horizontally. Learn flexbox, it's the most useful thing for layouts that's come to css, and it's really simple, there are options for spacing (gap), justify and align, that's pretty much 99% of cases right there.

The 1% are difficult to learn, because you only need them in 1% of the cases ;)

Re: Flexbox Froggy

#68

Post by krsdcbl »

qingcharles wrote: post #45
dsego wrote: post #14

Earlier quoted context omitted.

No tricks anymore, not much to keep up, flexbox and grid are the end-game. And for most UI cases flexbox is all you need, it's basically stack/group (or vbox/hbox), so you can arrange items vertically or horizontally. Learn flexbox, it's the most useful thing for layouts that's come to css, and it's really simple, there are options for spacing (gap), justify and align, that's pretty much 99% of cases right there.

I need the 1%. I want browser masonry support. Right now only Safari has it baked in properly, the rest I have to code around in a sub-optimal way: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la... I think Safari has it because the guy that wrote the spec now works at Apple. Not 100% sure of that, but seems that way. The code is in Chromium, just nobody ever hit the GO button.

tbh I'm glad, not sure about patching in an extra magic keyword with it's own set of new properties to achieve one specific layout pattern popularized by a jQuery lib in css grid module.

It would have been much cleaner to add "auto-span" utility to grid-column and grid-row that allow to define "overflow snapping" if items are larger than template definitions, with an option for grid-auto-flow to affect packing logic

This draft feels like it's solving a single use case by stacking presets over the grid api instead of exposing tools to achieve that use case

Post reply on HN