4 ms·

It definitely needs to be some curation at least. As an example, CSS: Google came up with Flexbox, Microsoft came up with Grid. Now we have two competing layo

It definitely needs to be some curation at least. As an example, CSS: Google came up with Flexbox, Microsoft came up with Grid. Now we have two competing layout methods doing pretty much the same. Yet they are conflicting in the sense that define the same flexibility entity by two different means: flexbox uses CSS property (that by itself conflicts with CSS 2.1 box model) and grid uses fr units for defining the same flexibility concept - portion of free space left in container from other fixed elements in it. Problem is that all browser from now on shall follow this mess.

gsnedders 9y ago
Flexbox and Grid coming from different companies isn't really relevant (and, to note, Flexbox comes from Mozilla originally, if I'm not mistaken, it is ultimately based on parts of XUL). They're also not competing: flexbox makes many 1D layouts easier than grid does. They're complementary, not conflicting.
- c-smile 9y ago
  Yes, flexbox was an old Mozilla XUL's feature (<vbox>/<hbox>) where flexes were defined by attributes. We all agreed at the moment that having presentation attributes in markup is nto that good idea. And that CSS flex was no-brainer port of that thing by replacing DOM attributes by bunch of CSS properties. Problem is that flexbox ruins CSS box model that mandates that width CSS property is what defines the width of inner box of the element. Now they have flex-basis that if defined in galaxy far, far away overrides that width by something else. That above already recognized as a mistake: https://wiki.csswg.org/ideas/mistakes https://wiki.csswg.org/ideas/mistakes As of that 1D ... grid-auto-flow: row | column; makes flexbox obsolete at great extent.
  - et-al 9y ago
    > Problem is that flexbox ruins CSS box model that mandates that width CSS property is what defines the width of inner box of the element. Now they have flex-basis that if defined in galaxy far, far away overrides that width by something else. I'm not quite following; may you please explain this? Thanks.
    - c-smile 9y ago
      Having this CSS: .flex-container { border: 1px solid #555; display : flex; } .flex-container > span { display:block; border: 1px solid #900; flex:1; width:100px; } and this markup: <div class="flex-container"> <span>Foo</span> <span>Bar</span> </div> what would be the width of each <span> there?
roneythomas6 9y ago
I use both flexbox and grid layout together. They are not comepting, merely completing each other. Grid can do things Flexbox can't do. Flexbox can do things Grid can't do.
- c-smile 9y ago
  "Flexbox can do things Grid can't do" For example?
  - rossy 9y ago
    flex-wrap. flexbox is one-dimensional, so it can "wrap" items that don't fit to the next line. The wrapped items don't have to line up with vertical grid lines, like they would in a grid, and they can be stretched or centred to fit across the full width of the parent.
    - c-smile 9y ago
      How that is different from a sequence of display:inline-block's (horizontal wrap) and multi-col layout (vertical wrap)?
      - jonnyscholes 9y ago
        inline-block isn't designed for layout - so you get side effects like the preservation of whitespace which you have to use hacks to resolve. Sure it works - but flex-wrap is a syntactically correct solution that doesn't require hacks.
      - jonnyscholes 9y ago
        I assume you're talking about CSS columns? Again they're not designed for layout - it's designed specifically for newspaper style columns of text where it doesn't matter which piece of text flows into which column. To use it for layout requires hacks or luck to adhear closely to designs. Pre-grid and flex I spent many hours of my life dealing with oddities around CSS columns - my life is in a much better place now not having to resort to it!
lambda 9y ago
Well, flexbox was much simpler and easier to standardize on and implement sooner. It has been available in all major browsers since 2015. Grid is great, and now works in most places, but it was good to have flexbox while grid was still in process; it only became available in Edge, in the final form, late last year, making it now available on all major browsers. You're always going to have cases like this; where there's something that's simple that works now, and something better that comes later. If you always wait for the better one, it will take forever for things to get done. Not to mention that flexbox is probably simpler and easier to understand and use for some of the simple use cases, so people will still probably continue to use it despite the fact that grid is available.
- c-smile 9y ago
  Problem is that flexbox is a subset of grid. Or to be precise: flexbox and grid are just two forms in a set of layout methods that we already have and will have in future. In normal architectural process we would establish first common infrastructure for all layout methods. I've proposed something like that 9 years ago: https://www.terrainformatica.com/w3/flex-layout/flex-layout.htm https://www.terrainformatica.com/w3/flex-layout/flex-layout.... but it didn't go through (Who am I and who are browser vendors?) So we would have single property that defines layout methods: display:block; flow: horizontal; // flexbox now flow: vertical; // ditto flow: grid( rows: ..., columns: ... ); // grid flow: multi-column( columns: ... ); // current multi-col flow: stack; flow: row(label,input); // variant of grid So flexbox and grid are just parts of larger entity - set of current and future layout methods. Yet flexes has to be units as they a) were from the very beginning ( see "proportional" units here: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.4 http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.4 ) and b) can be used in other layouts and properties (why not margin-left:1fr ?) Note that each layout method has its own parameters in their own namespaces. Currently set of CSS properties is about 400 in one flat namespace. Any junior architect will tell you that this is close to unmanageable state. But we still pushing new stuff on that x'mas tree. It will fall down by its own weight as some moment, but who cares ...

gsnedders 9y ago

Flexbox and Grid coming from different companies isn't really relevant (and, to note, Flexbox comes from Mozilla originally, if I'm not mistaken, it is ultimately based on parts of XUL). They're also not competing: flexbox makes many 1D layouts easier than grid does. They're complementary, not conflicting.

c-smile 9y ago
Yes, flexbox was an old Mozilla XUL's feature (<vbox>/<hbox>) where flexes were defined by attributes. We all agreed at the moment that having presentation attributes in markup is nto that good idea. And that CSS flex was no-brainer port of that thing by replacing DOM attributes by bunch of CSS properties. Problem is that flexbox ruins CSS box model that mandates that width CSS property is what defines the width of inner box of the element. Now they have flex-basis that if defined in galaxy far, far away overrides that width by something else. That above already recognized as a mistake: https://wiki.csswg.org/ideas/mistakes https://wiki.csswg.org/ideas/mistakes As of that 1D ... grid-auto-flow: row | column; makes flexbox obsolete at great extent.
- et-al 9y ago
  > Problem is that flexbox ruins CSS box model that mandates that width CSS property is what defines the width of inner box of the element. Now they have flex-basis that if defined in galaxy far, far away overrides that width by something else. I'm not quite following; may you please explain this? Thanks.
  - c-smile 9y ago
    Having this CSS: .flex-container { border: 1px solid #555; display : flex; } .flex-container > span { display:block; border: 1px solid #900; flex:1; width:100px; } and this markup: <div class="flex-container"> <span>Foo</span> <span>Bar</span> </div> what would be the width of each <span> there?

roneythomas6 9y ago

I use both flexbox and grid layout together. They are not comepting, merely completing each other. Grid can do things Flexbox can't do. Flexbox can do things Grid can't do.

c-smile 9y ago
"Flexbox can do things Grid can't do" For example?
- rossy 9y ago
  flex-wrap. flexbox is one-dimensional, so it can "wrap" items that don't fit to the next line. The wrapped items don't have to line up with vertical grid lines, like they would in a grid, and they can be stretched or centred to fit across the full width of the parent.
  - c-smile 9y ago
    How that is different from a sequence of display:inline-block's (horizontal wrap) and multi-col layout (vertical wrap)?
    - jonnyscholes 9y ago
      inline-block isn't designed for layout - so you get side effects like the preservation of whitespace which you have to use hacks to resolve. Sure it works - but flex-wrap is a syntactically correct solution that doesn't require hacks.
    - jonnyscholes 9y ago
      I assume you're talking about CSS columns? Again they're not designed for layout - it's designed specifically for newspaper style columns of text where it doesn't matter which piece of text flows into which column. To use it for layout requires hacks or luck to adhear closely to designs. Pre-grid and flex I spent many hours of my life dealing with oddities around CSS columns - my life is in a much better place now not having to resort to it!

lambda 9y ago

Well, flexbox was much simpler and easier to standardize on and implement sooner. It has been available in all major browsers since 2015. Grid is great, and now works in most places, but it was good to have flexbox while grid was still in process; it only became available in Edge, in the final form, late last year, making it now available on all major browsers. You're always going to have cases like this; where there's something that's simple that works now, and something better that comes later. If you always wait for the better one, it will take forever for things to get done. Not to mention that flexbox is probably simpler and easier to understand and use for some of the simple use cases, so people will still probably continue to use it despite the fact that grid is available.

c-smile 9y ago
Problem is that flexbox is a subset of grid. Or to be precise: flexbox and grid are just two forms in a set of layout methods that we already have and will have in future. In normal architectural process we would establish first common infrastructure for all layout methods. I've proposed something like that 9 years ago: https://www.terrainformatica.com/w3/flex-layout/flex-layout.htm https://www.terrainformatica.com/w3/flex-layout/flex-layout.... but it didn't go through (Who am I and who are browser vendors?) So we would have single property that defines layout methods: display:block; flow: horizontal; // flexbox now flow: vertical; // ditto flow: grid( rows: ..., columns: ... ); // grid flow: multi-column( columns: ... ); // current multi-col flow: stack; flow: row(label,input); // variant of grid So flexbox and grid are just parts of larger entity - set of current and future layout methods. Yet flexes has to be units as they a) were from the very beginning ( see "proportional" units here: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.4 http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.4 ) and b) can be used in other layouts and properties (why not margin-left:1fr ?) Note that each layout method has its own parameters in their own namespaces. Currently set of CSS properties is about 400 in one flat namespace. Any junior architect will tell you that this is close to unmanageable state. But we still pushing new stuff on that x'mas tree. It will fall down by its own weight as some moment, but who cares ...