Group

Layout elements horizontally and add space between them. The container spans the whole line. It uses a horizontal flex under the hood.

The differences with a stock horizontal flex:

• It adds some gap between elements (defaults to md, aka 16px).
• It centers elements vertically, with align, instead of stretching them.
• It wraps when needed (multi-line flex) (set wrap to either mono-line (nowrap) or multi-line (wrap), which sets the underlying flex-wrap property).

overrides

• Make children fill the container with grow.

  • It sets flex-grow: 1 on children.
  • By default, it makes them same-width (by capping them to a max-width) and put them on a single line (because it caps children to a share of the line).
  • We can reestablish multi-line by turning off preventGrowOverflow which turns off capping. wrapping was never disabled in this scenario.
  • If we also add nowrap, it's back a mono-line flex where children grow proportionally to their flex-basis (It's convoluted)

• (non-Group specific) Pick horizontal alignment with justify. It defaults to flex-start like stock flexes.