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

31–40 of 72 posts

Re: Flexbox Froggy

#31

Post by nicoburns »

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.

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.

Re: Flexbox Froggy

#33

Post by frob »

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/

Re: Flexbox Froggy

#34

Post by dsego »

klabb3 wrote: post #30
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.

Nesting of flexboxes can be tricky though – especially when you have elements that fill “the rest of the width/height”. I’ve found that grids are a little easier to maintain a flat hierarchy and avoid complexity, but the downside is it also doesn’t modularize that well – you need to compose all the cells together, some of which probably should belong in a child “component”.

Sub-grids will solve the grid in child component I think.

Re: Flexbox Froggy

#35

Post by cuddlyogre »

Today I learned about the order attribute, which would have come in handy this year.

Due to the magic of working primarily with perfectly functional but older projects, I only recently got the chance to start using flexbox. I immediately loved it far more than the float/clearfix headache I was used to.

The only thing that trips me up is the difference in naming with justify-content and align-items. I feel should both be (justify|align)-(THE SAME THING).

edit: Just got to 21. Looks like my confusion is common enough that there's a level about it.

Re: Flexbox Froggy

#37

Post by kmoser »

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.

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

Re: Flexbox Froggy

#38

Post by moron4hire »

tuukkah wrote: post #6

Guess CSS also has a section about Flexbox, but it focuses more on reading than writing CSS: https://www.guess-css.app/

Well, I clearly understand nothing about CSS position. I could consistently answer all the other questions, but position I consistently failed.

Re: Flexbox Froggy

#39

Post by moron4hire »

dsego wrote: post #16
victor106 wrote: post #8

Question from a CSS noob, When would you use Flexbox vs Grid?

Flexbox for most stuff, resort to grid only if flexbox can't solve your layout. The way I see it, if there is horizontal or vertical stacking, it's flexbox. And since you can nest, it covers a wide ranged of typical layout patterns (boxes within boxes). One caveat, since flexbox only arranges vertically or horizontally, you have to insert container flex elements, which means it affects the markup, so you are a bit co…

I tend to default to grid, especially for the top level page layout. I did it easier to reason about how it's going to look by just configuring the container. Less styling has to be specified for the child elements, especially when defining named areas.
Post reply on HN