Hacker News Reader

Comment by c-smile | Hacker News Reader

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.

View on HN

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.

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

As of that 1D ...

grid-auto-flow: row | column;

makes flexbox obsolete at great extent.

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

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?

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.

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

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.

"Flexbox can do things Grid can't do"

For example?

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.

How that is different from a sequence of display:inline-block's (horizontal wrap) and multi-col layout (vertical wrap)?

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.

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!

Like I said, stretching and centering. The justify-content property works on each row of a flexbox, so you can have a flexbox full of items with different initial sizes, automatically wrap the items that don't fit to multiple rows, and distribute the space around each item evenly. You can't do this with flow layout.

Reply on news.ycombinator.com