Flex Basis - Skelementor

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.

Flex

Block and inline flex containers

Flex Grow

Absorb leftover space along the main axis

​Overview

​Keywords and reset

​Fractional basis

​Fractional basis preview

​Example

​Responsive variants

​Best Practices

​Related Utilities