Flex Basis

Utility	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 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.

A

B

C

<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>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

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>

Hover modifier

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>