Flex Basis
Controls the initial size of flex elements.
| Class | Properties |
|---|---|
| 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 values: 0rem, 12.5rem, and 100%.
- The fb-0 class sets the flex-basis property to 0rem, allowing the item to have no initial size.
- The fb-50 class sets the flex-basis property to 12.5rem, giving the item a base size of 12.5rem.
- Finally, fb-full class sets the flex-basis property to 100%, allowing the item to take up the full width of its container.
<div class="stripes tc-white"> <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>Utilizing utilities conditionally
Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.
Responsive breakpoints
You can combine responsive breakpoints like sm:fb-*,md:fb-*, lg:fb-*, and xxl:fb-* allows targeting specific utilities in
different viewports.
<div class="fb-1 md:fb-2 ..."></div>Utilizing utilities conditionally
Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.
Hover states
Alternatively, you can apply :hover by using h:fb-* utility to override elements
and change their values when hovering over them.
<div class="fb-1 h:fb-2 ..."></div>