Flex

Controls how Flex elements grow and shrink.

Class	Properties
f-0	flex: 0;
f-1	flex: 1;
f-2	flex: 2;
f-3	flex: 3;
f-4	flex: 4;
f-5	flex: 5;
f-6	flex: 6;
f-7	flex: 7;
f-8	flex: 8;
f-none	flex: none;

---

Using breakpoints

Using responsive breakpoints like sm:f-*, md:f-*, lg:f-*, and xxl:f-* allows targeting specific utilities in different viewports.

<div class="f-1 md:f-2 ..."></div>

Using variants

Using :hover variants such as h:f-* allows you to override elements and change their values when hovering over them.

<div class="f-1 h:f-2 ..."></div>