Group

Layout elements horizontally, add some space between them. This is a high-level abstraction over an horizontal flex. The container spans the whole line.

  • gap: defaults to some spacing, as opposed to a regular flex. The default spacing is md, aka 16px.
  • justify: defaults to flex-start. (elements sit at the left)
  • align: defaults to center (vertically center), instead of stretch for regular flex.
  • grow: make all children have the same width. It first calculate the tentative equal width by dividing the remaining space by the number of items. It uses this tentative equal width a max-width for each children. Then, it sets flex-grow: 1 on each of them. If there was no limit, the bigger items would still be be bigger than the other even after the growing process, because each child would receive an equal share of the remaining space. Defaults to false. Also activates mono-line.
  • wrap: pick between mono-line or multi-line flex. Default to multi-line, probably to make it mobile "friendly", by preventing content clipping out of screen.

The subtle differences with a regular flex may not be worth it. The main draw could be the use of grow to make children of equal width.

earlymorning logo

© 2025 - All rights reserved

Group

Layout elements horizontally, add some space between them. This is a high-level abstraction over an horizontal flex. The container spans the whole line.

  • gap: defaults to some spacing, as opposed to a regular flex. The default spacing is md, aka 16px.
  • justify: defaults to flex-start. (elements sit at the left)
  • align: defaults to center (vertically center), instead of stretch for regular flex.
  • grow: make all children have the same width. It first calculate the tentative equal width by dividing the remaining space by the number of items. It uses this tentative equal width a max-width for each children. Then, it sets flex-grow: 1 on each of them. If there was no limit, the bigger items would still be be bigger than the other even after the growing process, because each child would receive an equal share of the remaining space. Defaults to false. Also activates mono-line.
  • wrap: pick between mono-line or multi-line flex. Default to multi-line, probably to make it mobile "friendly", by preventing content clipping out of screen.

The subtle differences with a regular flex may not be worth it. The main draw could be the use of grow to make children of equal width.