ContextQMD
Back to Tailwindcss

Flex Basis

src/docs/flex-basis.mdx

latest4.6 KB
Original Source

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx";

export const title = "flex-basis"; export const description = "Utilities for controlling the initial size of flex items.";

<ApiTable rows={[ ["basis-<number>", "flex-basis: calc(var(--spacing) * <number>);"], ["basis-<fraction>", "flex-basis: calc(<fraction> * 100%);"], ["basis-full", "flex-basis: 100%;"], ["basis-auto", "flex-basis: auto;"], ["basis-3xs", "flex-basis: var(--container-3xs); /* 16rem (256px) /"], ["basis-2xs", "flex-basis: var(--container-2xs); / 18rem (288px) /"], ["basis-xs", "flex-basis: var(--container-xs); / 20rem (320px) /"], ["basis-sm", "flex-basis: var(--container-sm); / 24rem (384px) /"], ["basis-md", "flex-basis: var(--container-md); / 28rem (448px) /"], ["basis-lg", "flex-basis: var(--container-lg); / 32rem (512px) /"], ["basis-xl", "flex-basis: var(--container-xl); / 36rem (576px) /"], ["basis-2xl", "flex-basis: var(--container-2xl); / 42rem (672px) /"], ["basis-3xl", "flex-basis: var(--container-3xl); / 48rem (768px) /"], ["basis-4xl", "flex-basis: var(--container-4xl); / 56rem (896px) /"], ["basis-5xl", "flex-basis: var(--container-5xl); / 64rem (1024px) /"], ["basis-6xl", "flex-basis: var(--container-6xl); / 72rem (1152px) /"], ["basis-7xl", "flex-basis: var(--container-7xl); / 80rem (1280px) */"], ["basis-(<custom-property>)", "flex-basis: var(<custom-property>);"], ["basis-[<value>]", "flex-basis: <value>;"], ]} />

Examples

Using the spacing scale

Use basis-<number> utilities like basis-64 and basis-128 to set the initial size of flex items based on the spacing scale:

<Figure> <Example> { <div className="flex flex-row space-x-4 font-mono text-sm leading-6 font-bold text-white"> <div className="flex h-14 basis-64 items-center justify-center rounded-lg bg-purple-500">01</div> <div className="flex h-14 basis-64 items-center justify-center rounded-lg bg-purple-500">02</div> <div className="flex h-14 basis-128 items-center justify-center rounded-lg bg-purple-500">03</div> </div> } </Example>
html
<!-- [!code classes:basis-64,basis-128] -->
<div class="flex flex-row">
  <div class="basis-64">01</div>
  <div class="basis-64">02</div>
  <div class="basis-128">03</div>
</div>
</Figure>

Using the container scale

Use utilities like basis-xs and basis-sm to set the initial size of flex items based on the container scale:

<Figure> <Example> { <div className="flex flex-row space-x-4 font-mono text-sm leading-6 font-bold text-white"> <div className="flex h-14 basis-3xs items-center justify-center rounded-lg bg-sky-500">01</div> <div className="flex h-14 basis-2xs items-center justify-center rounded-lg bg-sky-500">02</div> <div className="flex h-14 basis-xs items-center justify-center rounded-lg bg-sky-500">03</div> <div className="flex h-14 basis-sm items-center justify-center rounded-lg bg-sky-500">04</div> </div> } </Example>
html
<!-- [!code classes:basis-3xs,basis-2xs,basis-xs,basis-sm] -->
<div class="flex flex-row">
  <div class="basis-3xs">01</div>
  <div class="basis-2xs">02</div>
  <div class="basis-xs">03</div>
  <div class="basis-sm">04</div>
</div>
</Figure>

Using percentages

Use basis-<fraction> utilities like basis-1/2 and basis-2/3 to set the initial size of flex items:

<Figure> <Example> { <div className="flex flex-row space-x-4 font-mono text-sm leading-6 font-bold text-white"> <div className="flex h-14 basis-1/3 items-center justify-center rounded-lg bg-indigo-500">01</div> <div className="flex h-14 basis-2/3 items-center justify-center rounded-lg bg-indigo-500">02</div> </div> } </Example>
html
<!-- [!code classes:basis-1/3,basis-2/3] -->
<div class="flex flex-row">
  <div class="basis-1/3">01</div>
  <div class="basis-2/3">02</div>
</div>
</Figure>

Using a custom value

<UsingACustomValue utility="basis" value="30vw" />

Responsive design

<ResponsiveDesign property="flex-basis">
html
<!-- [!code classes:md:basis-1/3] -->
<div class="flex flex-row">
  <div class="basis-1/4 md:basis-1/3">01</div>
  <div class="basis-1/4 md:basis-1/3">02</div>
  <div class="basis-1/2 md:basis-1/3">03</div>
</div>
</ResponsiveDesign>

Customizing your theme

<CustomizingYourTheme utility="basis" themeKey="container" name="fixed-width basis" customName="4xs" customValue="14rem" includeSpacingNote />