Item Flow, Part 1: A new unified concept for layout

I think the Webkit team might be cooking here with this proposal.

I like this part:


item-direction: row | column | row-reverse | column-reverse

This working for both flexbox and grid is what I like to see too.

I also really like this idea:

Code languagecss

.container {
  display: flex;
  item-pack: balance;
}

The concept of a text-wrap: balance-style treatment in a flexbox layout is quite exciting because when a single item wraps onto a new row and grows to fill the container’s inline size, it’s not an ideal situation. It often results in developers reaching for more control too.

The syntax idea here is also interesting:

Code languagecss

.container {
  display: flex;
  item-pack: dense;
}

But of course, my previous worries return when I read this:

With the second idea, to behave more like Grid dense packing, Flexbox could instead rearrange the order of items and back-fill smaller spaces with smaller items. In this case, item 6 and 10 end up out of the normal order, placed on previous rows.

What happens to tabbing order in this context?

Look, if accessibility is put front-and-centre like it was for the CSS carousels experiments by the Chrome team, I’ll be very on board with these new proposals for sure. The question now is, are the other browsers on board with these ideas?

Check it out

Newsletter