Flex Basis

Controls the initial size of flex elements.

Class	Style
`fb-0`	`flex-basis: 0rem;`
`fb-1`	`flex-basis: 0.25rem;`
`fb-2`	`flex-basis: 0.5rem;`
`fb-3`	`flex-basis: 0.75rem;`
`fb-4`	`flex-basis: 1rem;`
`fb-5`	`flex-basis: 1.25rem;`
`fb-6`	`flex-basis: 1.5rem;`
`fb-7`	`flex-basis: 1.75rem;`
`fb-8`	`flex-basis: 2rem;`
`fb-9`	`flex-basis: 2.25rem;`
`fb-10`	`flex-basis: 2.5rem;`
`fb-11`	`flex-basis: 2.75rem;`
`fb-12`	`flex-basis: 3rem;`
`fb-13`	`flex-basis: 3.25rem;`
`fb-14`	`flex-basis: 3.5rem;`
`fb-15`	`flex-basis: 3.75rem;`
`fb-16`	`flex-basis: 4rem;`
`fb-17`	`flex-basis: 4.25rem;`
`fb-18`	`flex-basis: 4.5rem;`
`fb-19`	`flex-basis: 4.75rem;`
`fb-20`	`flex-basis: 5rem;`
`fb-21`	`flex-basis: 5.25rem;`
`fb-22`	`flex-basis: 5.5rem;`
`fb-23`	`flex-basis: 5.75rem;`
`fb-24`	`flex-basis: 6rem;`
`fb-25`	`flex-basis: 6.25rem;`
`fb-26`	`flex-basis: 6.5rem;`
`fb-27`	`flex-basis: 6.75rem;`
`fb-28`	`flex-basis: 7rem;`
`fb-29`	`flex-basis: 7.25rem;`
`fb-30`	`flex-basis: 7.5rem;`
`fb-31`	`flex-basis: 7.75rem;`
`fb-32`	`flex-basis: 8rem;`
`fb-33`	`flex-basis: 8.25rem;`
`fb-34`	`flex-basis: 8.5rem;`
`fb-35`	`flex-basis: 8.75rem;`
`fb-36`	`flex-basis: 9rem;`
`fb-37`	`flex-basis: 9.25rem;`
`fb-38`	`flex-basis: 9.5rem;`
`fb-39`	`flex-basis: 9.75rem;`
`fb-40`	`flex-basis: 10rem;`
`fb-41`	`flex-basis: 10.25rem;`
`fb-42`	`flex-basis: 10.5rem;`
`fb-43`	`flex-basis: 10.75rem;`
`fb-44`	`flex-basis: 11rem;`
`fb-45`	`flex-basis: 11.25rem;`
`fb-46`	`flex-basis: 11.5rem;`
`fb-47`	`flex-basis: 11.75rem;`
`fb-48`	`flex-basis: 12rem;`
`fb-49`	`flex-basis: 12.25rem;`
`fb-50`	`flex-basis: 12.5rem;`
`fb-51`	`flex-basis: 12.75rem;`
`fb-52`	`flex-basis: 13rem;`
`fb-53`	`flex-basis: 13.25rem;`
`fb-54`	`flex-basis: 13.5rem;`
`fb-55`	`flex-basis: 13.75rem;`
`fb-56`	`flex-basis: 14rem;`
`fb-57`	`flex-basis: 14.25rem;`
`fb-58`	`flex-basis: 14.5rem;`
`fb-59`	`flex-basis: 14.75rem;`
`fb-60`	`flex-basis: 15rem;`
`fb-61`	`flex-basis: 15.25rem;`
`fb-62`	`flex-basis: 15.5rem;`
`fb-63`	`flex-basis: 15.75rem;`
`fb-64`	`flex-basis: 16rem;`
`fb-65`	`flex-basis: 16.25rem;`
`fb-66`	`flex-basis: 16.5rem;`
`fb-67`	`flex-basis: 16.75rem;`
`fb-68`	`flex-basis: 17rem;`
`fb-69`	`flex-basis: 17.25rem;`
`fb-70`	`flex-basis: 17.5rem;`
`fb-71`	`flex-basis: 17.75rem;`
`fb-72`	`flex-basis: 18rem;`
`fb-73`	`flex-basis: 18.25rem;`
`fb-74`	`flex-basis: 18.5rem;`
`fb-75`	`flex-basis: 18.75rem;`
`fb-76`	`flex-basis: 19rem;`
`fb-77`	`flex-basis: 19.25rem;`
`fb-78`	`flex-basis: 19.5rem;`
`fb-79`	`flex-basis: 19.75rem;`
`fb-80`	`flex-basis: 20rem;`
`fb-81`	`flex-basis: 20.25rem;`
`fb-82`	`flex-basis: 20.5rem;`
`fb-83`	`flex-basis: 20.75rem;`
`fb-84`	`flex-basis: 21rem;`
`fb-85`	`flex-basis: 21.25rem;`
`fb-86`	`flex-basis: 21.5rem;`
`fb-87`	`flex-basis: 21.75rem;`
`fb-88`	`flex-basis: 22rem;`
`fb-89`	`flex-basis: 22.25rem;`
`fb-90`	`flex-basis: 22.5rem;`
`fb-91`	`flex-basis: 22.75rem;`
`fb-92`	`flex-basis: 23rem;`
`fb-93`	`flex-basis: 23.25rem;`
`fb-94`	`flex-basis: 23.5rem;`
`fb-95`	`flex-basis: 23.75rem;`
`fb-96`	`flex-basis: 24rem;`
`fb-97`	`flex-basis: 24.25rem;`
`fb-98`	`flex-basis: 24.5rem;`
`fb-99`	`flex-basis: 24.75rem;`
`fb-100`	`flex-basis: 25rem;`
`fb-auto`	`flex-basis: auto;`
`fb-full`	`flex-basis: 100%;`
`fb-half`	`flex-basis: 50%;`

This example showcases various flex-basis utilities:

The fb-0 flex basis utility sets the flex-basis property to 0rem, allowing the item to have no initial size.
The fb-50 flex basis utility sets the flex-basis property to 12.5rem, giving the item a base size of 12.5rem.
Finally, fb-full flex basis utility sets the flex-basis property to 100%, allowing the item to take up the full width of its container.

<div class="tc-white" id="area">
  <div class="d-f g-4 h-24 w-full">
    <div class="ai-c bg-indigo d-f fb-0 jc-c p-4 rad-1">A</div>
    <div class="ai-c bg-indigo d-f fb-50 jc-c p-4 rad-1">B</div>
    <div class="ai-c bg-indigo d-f fb-full jc-c p-4 rad-1">C</div>
  </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.

Using media queries

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

Using hover states

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