Flex Grow

Controls the growth of flex elements.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Class	Style
`fg-0`	`flex-grow: 0;`
`fg-1`	`flex-grow: 1;`
`fg-2`	`flex-grow: 2;`
`fg-3`	`flex-grow: 3;`
`fg-4`	`flex-grow: 4;`
`fg-5`	`flex-grow: 5;`
`fg-6`	`flex-grow: 6;`
`fg-7`	`flex-grow: 7;`
`fg-8`	`flex-grow: 8;`

This example showcases various flex-grow utilities:

The fg-0 flex grow utility sets the flex-grow property to 0, preventing the item from growing.
The fg-1 flex grow utility sets the flex-grow property to 1, allowing the item to grow and fill available space equally with other items.
Finally, fg-2 flex grow utility sets the flex-grow property to 2, allowing the item to grow twice as much as an item with a flex-grow value of 1.

<div class="d-f g-4 tc-white">
  <div class="bg-indigo fg-0 p-4 d-f ai-c jc-c">A</div>
  <div class="bg-indigo fg-1 p-4 d-f ai-c jc-c">B</div>
  <div class="bg-indigo fg-2 p-4 d-f ai-c jc-c">C</div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Targeting different viewports

You can combine responsive breakpoints like sm:fg-*, md:fg-*, lg:fg-*, and xxl:fg-* to allow targeting specific utilities in different viewports.

Targeting hover states

Alternatively, you can apply :hover by using h:fg-* utility to override elements and change their values when hovering over them.