Support flex-wrap: balance

[yisibl]

CSSWG issue

w3c/csswg-drafts#3070

Introduction

flex-wrap: balance is primarily used to achieve layouts like those seen in Google Image Search or Flickr.com.

@bfgeek explains how it works in his article.

This is undoubtedly one of the most fascinating features of CSS layouts! ✌🏻❤️

Demo: https://codepen.io/yisi/full/WbwMPBK

[nicoburns]

Seems like a useful feature. But it looks like there isn't a spec for it yet?

[yisibl]

Yes, the CSS Working Group is still discussing this, but perhaps an experimental version could be implemented first (referencing Blink's code).

[leecbaker]

A draft of the spec is available: https://drafts.csswg.org/css-flexbox-2/#propdef-flex-wrap

WPT tests (originally from chromium) are available as well: https://github.com/web-platform-tests/wpt/tree/master/css/css-flexbox/balance

[nicoburns]

This part of the spec also looks relevant: https://drafts.csswg.org/css-flexbox-2/#algo-balance

I think we could accept an implementation of this in Taffy at this point. The implementation looks like it would be quite straightforward architecturally (a new step in the Flexbox algorithm before resolving flex sizes). The trickiness would be mostly in implementing the balancing algorithm efficiently.

I see there is a crate for the SMAWK algorithm (https://lib.rs/crates/smawk) which might be helpful (I have not evaluated it for quality), but it's used in the textwrap crate which is very widely used and is also solving essentially the same balancing problem as we are here.

[nicoburns]

Implemented in #1105