Skip to main content

​
Overview

flex-basis is the size a flex item starts from on the main axis before flex-grow and flex-shrink adjust it. Use basis-* classes on children inside a .flex or .inline-flex parent when you want explicit starting widths (or heights in a column) instead of relying only on content or width utilities.

​
Keywords and reset

ClassCSSUsage
.basis-autoflex-basis: auto;Use the item’s width/height (or content) as the starting size
.basis-fullflex-basis: 100%;Start from the full main-axis size of the container
.basis-0flex-basis: 0px;Start from zero so flex-grow distributes space from a clean split
.basis-pxflex-basis: 1px;Hairline flex lanes, dividers, or fixed slivers

​
Fractional basis

These mirror the fractional width scale (Width) but apply as flex-basis on flex items.
ClassValueCSSUsage
.basis-1-250%flex-basis: 50%;Two-column splits
.basis-1-333.333%flex-basis: 33.333%;Three-up layouts
.basis-2-366.666%flex-basis: 66.666%;Wide primary column
.basis-1-425%flex-basis: 25%;Narrow rails
.basis-3-475%flex-basis: 75%;Content-heavy panels

​
Fractional basis preview

<div class="elementor-element flex gap-2 w-full">
  <div class="basis-1-2 p-3 bg-primary text-white rounded text-center text-sm font-bold">
    50%
  </div>
  <div class="basis-1-2 p-3 bg-teal text-white rounded text-center text-sm font-bold">
    50%
  </div>
</div>
<div class="elementor-element flex gap-2 w-full">
  <div class="basis-1-3 p-3 bg-violet text-white rounded text-center text-sm font-bold">
    One third
  </div>
  <div class="basis-2-3 p-3 bg-pink text-white rounded text-center text-sm font-bold">
    Two thirds
  </div>
</div>
<div class="elementor-element flex gap-2 w-full">
  <div class="basis-1-4 p-3 bg-warning text-black rounded text-center text-sm font-bold">
    Quarter
  </div>
  <div class="basis-3-4 p-3 bg-cyan text-white rounded text-center text-sm font-bold">
    Three quarters
  </div>
</div>

​
Example

<div class="elementor-element flex gap-4">
  <aside class="basis-1-3 p-4 bg-teal text-white rounded">
    Sidebar
  </aside>
  <main class="basis-2-3 p-4 bg-primary text-white rounded">
    Main
  </main>
</div>

<div class="elementor-element flex gap-2">
  <div class="basis-0 flex-grow p-3 bg-primary text-white rounded">
    Grows from zero
  </div>
  <div class="basis-auto p-3 bg-gray-light rounded text-black">
    Sizes to content
  </div>
</div>

​
Responsive variants

Each basis-* utility ships with structural breakpoint suffixes:
  • .basis-auto--on-xs … .basis-full--on-xxl
  • .basis-0--on-*, .basis-px--on-*
  • .basis-1-2--on-* through .basis-3-4--on-*
<div class="elementor-element flex gap-4">
  <div class="basis-full basis-1-3--on-m p-4 bg-primary text-white rounded">
    Stacks full width on small screens, sidebar width from medium down.
  </div>
  <div class="basis-full basis-2-3--on-m p-4 bg-gray-light rounded">
    Companion column
  </div>
</div>
See Breakpoints for the --on-* map.

​
Best Practices

  • Add .flex (or .inline-flex) on the parent first; basis-* applies to items, not the container.
  • Pair .basis-0 with .flex-grow when you want equal columns that ignore intrinsic content width.
  • Prefer basis-* when the value should participate in the flex algorithm; use w-* when you need width regardless of flex context.
  • Combine basis-* with flex-shrink when some lanes should collapse before others in tight viewports.

Flex

Block and inline flex containers

Flex Grow

Absorb leftover space along the main axis

Flex Shrink

Control how items compress when space is tight

Width

Width utilities for non-flex sizing