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) (We can set wrap to mono-line (nowrap) or multi-line (wrap), which sets the underlying flex-wrap).

the grow variant (override)

• 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 the same max-width), and pack them on a single line (since the max-width is a share of the line, not because of disabling wrap).
  • We can reestablish multi-line by turning off capping (set preventGrowOverflow to false): it now goes to the next line since wrapping was never disabled, but only if the elements do not fit on a single line (do not use)
  • If we also add nowrap, it's back a mono-line flex where children grow proportionally with their flex-basis (It's convoluted), cutting any overflow if the single line is not wide enough.

other overrides

• Pick horizontal alignment with justify. It defaults to flex-start like default flexes.