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%; |
Using breakpoints
Using 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>Using variants
Using :hover variants such as h:fb-* allows you to override elements and change their values when hovering over them.
<div class="fb-1 h:fb-2 ..."></div>