Group

A layout component that layouts elements horizontally and adds space between them.

The container spans the whole line. It uses a horizontal flex under the hood.

Differences with a stock horizontal flex:

It adds gap between elements (defaults to md, aka 16px).
It centers elements vertically, with align, instead of stretching them.
It wraps to the next line if needed (aka multi-line flex). We can revert to mono-line with (wrap="nowrap"), which sets the underlying flex-wrap.

The grow variant aims to fill the container horizontally by growing children:
- It sets flex-grow: 1 on children.
- By default, it makes them same-width (by capping them to the same max-width, set to a share of the line, which in turns make them fit in one line).
  - (advanced) If we turn off capping (set preventGrowOverflow to false): elements can go to the next line if there is not enough room for all of them in the non-grown version. (do not use)
  - (advanced) If we 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.

Align items horizontally with justify. It defaults to flex-start (like default flexes).

Group

A layout component that layouts elements horizontally and adds space between them.

The container spans the whole line. It uses a horizontal flex under the hood.

Differences with a stock horizontal flex:

It adds gap between elements (defaults to md, aka 16px).

It centers elements vertically, with align, instead of stretching them.

It wraps to the next line if needed (aka multi-line flex). We can revert to mono-line with (wrap="nowrap"), which sets the underlying flex-wrap.

the grow variant (override)

The grow variant aims to fill the container horizontally by growing children:

It sets flex-grow: 1 on children.
By default, it makes them same-width (by capping them to the same max-width, set to a share of the line, which in turns make them fit in one line).
- (advanced) If we turn off capping (set preventGrowOverflow to false): elements can go to the next line if there is not enough room for all of them in the non-grown version. (do not use)
- (advanced) If we 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

Align items horizontally with justify. It defaults to flex-start (like default flexes).