basis-* sets the starting size before grow/shrink — the full spacing scale + fractions. This family contains 63 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
basis-0flex-basis: 0px;
basis-1flex-basis: 0.25rem;
basis-2flex-basis: 0.5rem;
basis-3flex-basis: 0.75rem;
basis-4flex-basis: 1rem;
basis-5flex-basis: 1.25rem;
basis-6flex-basis: 1.5rem;
basis-7flex-basis: 1.75rem;
basis-8flex-basis: 2rem;
basis-9flex-basis: 2.25rem;
basis-10flex-basis: 2.5rem;
basis-11flex-basis: 2.75rem;
basis-12flex-basis: 3rem;
basis-14flex-basis: 3.5rem;
basis-16flex-basis: 4rem;
basis-20flex-basis: 5rem;
basis-24flex-basis: 6rem;
basis-28flex-basis: 7rem;
basis-32flex-basis: 8rem;
basis-36flex-basis: 9rem;
basis-40flex-basis: 10rem;
basis-44flex-basis: 11rem;
basis-48flex-basis: 12rem;
basis-52flex-basis: 13rem;
basis-56flex-basis: 14rem;
basis-60flex-basis: 15rem;
basis-64flex-basis: 16rem;
basis-72flex-basis: 18rem;
basis-80flex-basis: 20rem;
basis-96flex-basis: 24rem;
basis-pxflex-basis: 1px;
basis-0.5flex-basis: 0.125rem;
basis-1.5flex-basis: 0.375rem;
basis-2.5flex-basis: 0.625rem;
basis-3.5flex-basis: 0.875rem;
basis-autoflex-basis: auto;
basis-1/2flex-basis: 50%;
basis-1/3flex-basis: 33.333333%;
basis-2/3flex-basis: 66.666667%;
basis-1/4flex-basis: 25%;
basis-2/4flex-basis: 50%;
basis-3/4flex-basis: 75%;
basis-1/5flex-basis: 20%;
basis-2/5flex-basis: 40%;
basis-3/5flex-basis: 60%;
basis-4/5flex-basis: 80%;
basis-1/6flex-basis: 16.666667%;
basis-2/6flex-basis: 33.333333%;
basis-3/6flex-basis: 50%;
basis-4/6flex-basis: 66.666667%;
basis-5/6flex-basis: 83.333333%;
basis-1/12flex-basis: 8.333333%;
basis-2/12flex-basis: 16.666667%;
basis-3/12flex-basis: 25%;
basis-4/12flex-basis: 33.333333%;
basis-5/12flex-basis: 41.666667%;
basis-6/12flex-basis: 50%;
basis-7/12flex-basis: 58.333333%;
basis-8/12flex-basis: 66.666667%;
basis-9/12flex-basis: 75%;

…and 3 more in this family — search by class name to find the exact one.

Example#

example
html
<div class="flex flex-wrap">
  <div class="basis-1/3">…</div>
</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox