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 utility sets the flex-basis property to 0rem, allowing the item to have no initial size.
- The fb-50 utility sets the flex-basis property to 12.5rem, giving the item a base size of 12.5rem.
- Finally, fb-full utility 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>
Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
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>
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>