Add support for Modifier.flex.

[colinrtwhite]

Adds support for a new flex property to Row and Column. This follows the CSS spec for the flex property. It's a combination property that sets flex-grow, flex-shrink, and flex-basis all at once. Notably, it's useful for creating equivalently sized nodes along the main axis of a row/column.

[swankjesse]

Awesome.

How independent are the flex modifiers in HTML? Ie. if I set flex basis does it ignore the value I set for Grow and Shrink?

If they’re fully independent then I don’t like it if flex(1.0) also sets grow and shrink, because we can also set those modifiers afterwards flex(1.0).grow(0.0) and the precedence gets really ugly.

If they’re all coupled then maybe we should have one Modifier object with 3 attributes, and offer accelerator APIs to set each of 'em independently? Like we do with margins?

[colinrtwhite]

@swankjesse Yep, flex overwrites previous values set for flex-grow and flex-shrink. Conversely, setting Modifier.flex(1.0).grow(0.0) will overwrite part of what flex(1.0) set. This isn't super clear in the API unfortunately. I like the idea of combining them (and maybe renaming?). If we do something similar to Margin it could look like this:

data class Flex(
  val grow: Double = Unset, // Create an unset constant to avoid replacing previous values.
  val shrink: Double = Unset,
  val basis: Double = Unset,
)

fun Flex(flex: Double): Flex // Set all 3

Modifier.flex(Flex(1.0)) // Set all 3

Modifier.flex(Flex(grow = 1.0)) // Sets all 3

Also, I've been thinking maybe this property would make more sense named something like weight. Thoughts?

Unfortunately, declaring extensions directly on Modifier loses the compile-time safety we get from ColumnScope/RowScope since we can't have multiple receivers (yet), which is why I'd vote to use a class instead.

[JakeWharton]

Last wins is a pretty common precedence rule. It will be even more obvious once we switch to the trait nomenclature, hopefully.

In CSS I've certainly done things like border: 1px solid red; border-left-with: 5px; where I want the helper and then to customize something further.