Hacker News Reader

Flexbox has been useful, but for me has essentially been superseded by css grid, pretty much for the reasons you mention. I find flexbox to be difficult to use and feels more like a stopgap feature on the way to full blown grids than anything long lasting. I wish subgrids would become standard, but regardless we're in a much better place these days vis-à-vis css layouts than we were pre-grid.

> just looking at them in the raw HTML document, they make it obvious how the page is going to be presented in the end

I guess you can say the same thing about the infamous <FONT> tag. But if you want styling information directly in the HTML, you can still do it with the "style"-attribute, using marginally more syntax. e.g. <div style="display:table"> or <div style="display:flex; flex-direction:row"> instead of table <table> where html table semantics are not appropriate.

I do find flexbox a much nicer model than tables, but I guess that comes down to taste. A flex is basically like a table with either a single column or a single row, and a bit more fine-grained control.

the style attribute is problematic with strong content security policies disallowing unsafe-inline styles [1]. This can be worked around using classes though.

[1] https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Co...

I find the flexbox syntax terrible and confusing, and the fact that they created a bunch of shortcuts that encompass several properties at once makes things even worse. Every time I want to use flexbox, I have to refer to the documentation. The result is that I use flexbox once for the main layout, and then tend to use other mechanisms in order to position small elements, menu items etc. even though flexbox would do the job perfectly.

I wish it was intuitive to me, so I could use it quickly and without turning my css code into a mess.

I also refer to the docs often, but I can get pretty much anything done with flexbox quite quickly. I guess it only comes down to practice.

Try Bootstrap 4's "grid only" CSS file. I used to do Flexbox by hand, until I realized I was reinventing the Bootstrap wheel by abstracting most of it into classes.

It's all based on rows and columns, that collapse based on screen width. Plus, utility classes for all the alignment positions.

You'll still run into the issue of way too many nested div's, but I find myself more productive than trying to flexbox everything by hand. ymmv.

CSS Grid is the nice API. It fits my mental model for 90% of layout use cases. Flexbox makes responsiveness a lot nicer, and it definitely passable.

> but just looking at the raw HTML always leaves me a bit confused how elements on the page will relate to each other.

Generally you shouldn't be able to determine layout from the raw HTML. HTML should be semantic. CSS determines layout and styling.

I somewhat disagree with this. The semantic structure should naturally define the layout.

Flexbox has its place in one's toolkit, but I still prefer floats in many situations. It might be subjective, but floats often seem to result in cleaner CSS, even taking into account the clearfix hack (which becomes much simpler with a Sass mixin).

Suppose you have the following desktop layout:

    ONE TWO THREE FOUR FIVE

and you want to turn it into the following mobile layout:

    O   N   E
    TWO THREE
    FOUR FIVE

With floats, you can achieve that by overriding only a few properties, primarily 'width'. But if you asked me to do it with either flexbox or grid, I'd have to think for a bit.

Flexbox is good for things that need internal flexibility in one dimension. Grid is for things that have a relatively static, two-dimensional layout. Floats are perfect for things that need to shuffle across dimensions, and I don't see any reason to avoid using them. After all, it's not as if floats are un-semantic or anything.

In your example, how are floats any different than a flex container with wrapping enabled? The wrapping is still dependent on the width of the children, just like your floating elements.

Two ways offhand:

* Float will alight "one" to the left or right with a gap next to it, while flex can stretch, center, or align the element differently.

* If the elements are different heights, they'll stack up very differently.

It's not different. Both will work. But if the above is all you need, I feel that flexbox adds a lot of verbosity for no benefit.

I think it is a common misconception that grid based layouts are static. Some combination of repeat, auto-* and minmax() can give very flexible layouts without even needing CSS media queries.

I think that that is part of the point with "modern" (however you want to call it) HTML: it should be declarative and layout-agnostic, and let the CSS do its thing regarding the various ways it should be displayed; this way the HTML is the same regardless of the actual layout of the page. Or at least it should be, in principle.

Just a reminder: csszengarden.com was created back in 2004 (I think). Zeldman's "Designing with Web Standards" came out in 2003. "Modern CSS" is over 17 years old. The CSS itself is not yet 24 years old.

It's not nice by any means.

I need to apply justify|align|content|items in the browser to make it do what I want. I can't for the life of me remember what they do.

But the underlying principles are neat. Flexbox gives me a container and an arbitrary number of children of various types which I can then position to my hearts delight. And things tend to fall in to place without me over-specifying every case.

As long as I'm working along one dimension, that is.

> but just looking at the raw HTML always leaves me a bit confused how elements on the page will relate to each other.

You say it like it's a bad thing. Chances are the relations are flexible.

One does run in to issues when the Flexbox rules apply across the bounds of components (e.g. Vue or React components) which makes composition difficult. Can be avoided by clearly separating layout from the rest. The S in SOLID applies to CSS as well.

> I need to apply justify|align|content|items in the browser to make it do what I want. I can't for the life of me remember what they do.

I found the Flexbox Zombies course to be helpful for that: https://flexboxzombies.com

It's free right now too.

I started at the same time as you. I can’t say it’s a nice API nor can you eyeball the document and understand its layout, but it’s better than the horror shows of centering things of old. Things like flexbox froggy allow it to become fairly intuitive.

Css specification does not do nice API. It does unintuive, convoluted and full of special cases. Flexbox is much better and easier then without flexbox.