5 ms·

Honest question, because I started with HTML when tables were still the rage for defining layouts and I pretty much stopped working on new sites shortly before

Honest question, because I started with HTML when tables were still the rage for defining layouts and I pretty much stopped working on new sites shortly before Flexbox became a thing: Do people actually think that Flexbox is a nice API, or is it more like "well, at least it's better than using tables or float/clear hacks"? I know tables shouldn't be used for things that are not actually tabular data, but I have to say that just looking at them in the raw HTML document, they make it obvious how the page is going to be presented in the end. With Flexbox, you have an undefined maze of divs which are then magically styled by an external stylesheet. I recently tried using this approach for something that would probably have been solved with an image map 20 years ago, and it was awkward to work with. I see Flexbox can have an advantage when using the same markup for e.g. mobile and desktop layout, but just looking at the raw HTML always leaves me a bit confused how elements on the page will relate to each other.

Biganon 6y ago
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.
- faeyanpiraat 6y ago
  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.
tarkin2 6y ago
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.
frabert 6y ago
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.
- rimliu 6y ago
  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.
kijin 6y ago
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.
- kaishiro 6y ago
  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.
  - kijin 6y ago
    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.
  - Izkata 6y ago
    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.
- rimliu 6y ago
  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.
watwut 6y ago
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.
gherkinnn 6y ago
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.
- mklein994 6y ago
  > 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 https://flexboxzombies.com It's free right now too.
mstade 6y ago
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.
goto11 6y ago
> 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.
- jraph 6y ago
  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/Content-Security-Policy/style-src https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Co...
H1Supreme 6y ago
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.
nicoburns 6y ago
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.
- runawaybottle 6y ago
  I somewhat disagree with this. The semantic structure should naturally define the layout.

Biganon 6y ago

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.

faeyanpiraat 6y ago
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.

tarkin2 6y ago

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.

frabert 6y ago

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.

rimliu 6y ago
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.

kijin 6y ago

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.

kaishiro 6y ago
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.
- kijin 6y ago
  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.
- Izkata 6y ago
  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.
rimliu 6y ago
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.

watwut 6y ago

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.

gherkinnn 6y ago

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.

mklein994 6y ago
> 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 https://flexboxzombies.com It's free right now too.

mstade 6y ago

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.

goto11 6y ago

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

jraph 6y ago
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/Content-Security-Policy/style-src https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Co...

H1Supreme 6y ago

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.

nicoburns 6y ago

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.

runawaybottle 6y ago
I somewhat disagree with this. The semantic structure should naturally define the layout.