Flex Basis

Set the initial main-axis size of flex items with bundled basis-* utilities before grow and shrink run.

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

Class	CSS	Usage
.basis-auto	flex-basis: auto;	Use the item’s width/height (or content) as the starting size
.basis-full	flex-basis: 100%;	Start from the full main-axis size of the container
.basis-0	flex-basis: 0px;	Start from zero so flex-grow distributes space from a clean split
.basis-px	flex-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.

Class	Value	CSS	Usage
.basis-1-2	50%	flex-basis: 50%;	Two-column splits
.basis-1-3	33.333%	flex-basis: 33.333%;	Three-up layouts
.basis-2-3	66.666%	flex-basis: 66.666%;	Wide primary column
.basis-1-4	25%	flex-basis: 25%;	Narrow rails
.basis-3-4	75%	flex-basis: 75%;	Content-heavy panels

Fractional basis preview

<div class="elementor-element flex gap-2 width-full">
  <div class="basis-1-2 padding-3 background-primary text-white rounded text-center text-sm font-bold">
    50%
  </div>
  <div class="basis-1-2 padding-3 background-success text-white rounded text-center text-sm font-bold">
    50%
  </div>
</div>
<div class="elementor-element flex gap-2 width-full">
  <div class="basis-1-3 padding-3 background-primary text-white rounded text-center text-sm font-bold">
    One third
  </div>
  <div class="basis-2-3 padding-3 background-secondary text-white rounded text-center text-sm font-bold">
    Two thirds
  </div>
</div>
<div class="elementor-element flex gap-2 width-full">
  <div class="basis-1-4 padding-3 background-warning text-black rounded text-center text-sm font-bold">
    Quarter
  </div>
  <div class="basis-3-4 padding-3 background-secondary 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 padding-4 background-success text-white rounded">
    Sidebar
  </aside>
  <main class="basis-2-3 padding-4 background-primary text-white rounded">
    Main
  </main>
</div>

<div class="elementor-element flex gap-2">
  <div class="basis-0 flex-grow padding-3 background-primary text-white rounded">
    Grows from zero
  </div>
  <div class="basis-auto padding-3 background-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-*

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 width-* when you need width regardless of flex context.
• Combine basis-* with flex-shrink when some lanes should collapse before others in tight viewports.

Related Utilities

Flex

Block and inline flex containers

Flex Grow

Absorb leftover space along the main axis