Hacker News Reader

Comment by devsatish | Hacker News Reader

As some one in similar boat. The best resource has been rolling up sleeves and digging into Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). Start with Admin Page templates for some visual cues (tons of them on themeforest/github - both for Web/Mobile)

View on HN

Wasn't CSS Grids the best thing that has ever happened to CSS? Why is Flexbox keep getting recommended on its own without Grid?

IE11 doesn't have full support, so unless you're lucky enough to be able to ignore IE, you have to resort to jacks and workarounds to use grid. At which point it's generally easier just to use flexbox.

Grid will be awesome very soon.

IE (all versions) is estimated to account for less than 6% of users, these days. It’s so small it’s basically “exotic browser” territory.

I think the argument these days should be “do X unless you’re unfortunate enough to care about IE”.

I've yet to work on a product that didn't care about IE. I look forward to that day more than I look forward to the return of the Messiah.

6% is still quite a lot! IE6 and IE8 were both still widely supported until they had <1% narket share. Firefox at 8% doesn't have much more than that.

I find flexbox has a small, easy to learn and teach api that allows you to do almost any kind of web app layout that you would need to do, exceptions being grids and tables.

Css Grid is less intuitive but they do make grid gutters much much easier.

Most of the time I reach for flex box. Only when I'm doing a guttered grid would I reach for css grids.

With how hard it is to get a companies UI devs on the same technology and patterns, flexbox is an easy standard to coordinate around.

Not to mention it's better supported.

Grid is awesome, and I highly recommend learning what it can do for you. That said, they serve different purposes. However, between the two of them they address 97% of my needs on the frontend. This[1] is a good rundown of what the two do/dont do.

[1] - https://www.youtube.com/watch?v=hs3piaN4b5I

Flexbox is for "1D layouts"; "lists" (including ones that wrap). Grid is for "2D layouts". In most cases you don't really need Grid (and it has a much steeper learning curve), but if you want to, say, mimic a <table> without an actual <table> element, Flexbox simply cannot do that.

Partial support in IE refers to supporting an older version of the specification.

https://caniuse.com/#feat=css-grid

Yes. If I'm interpreting OP correctly, the single answer to the question is flex. It can seem like a weird API (I STILL to this day have to look up certain things), but once you get used to it it is GREAT.

Also, if you're using styled-components (which I recommend), use styled-flex-component for layout and things get even better. It's such a breeze, it makes even complicated layouts so simple and fast to put together.

I migrated to CSS grids as soon as I could but find a lot of people still lean on flexbox. Is that just preference, older browser support ...? Are there things you can't do in grid?

The two occupy a venn diagram of functionality. They do some stuff the same, but they also both do unique things the other doesnt. See this for a good rundown: https://www.youtube.com/watch?v=hs3piaN4b5I

Also https://yoksel.github.io/flex-cheatsheet/

Do I not need a component library if I use Flexbox ?

Reply on news.ycombinator.com