> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flex Basis

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

export const BasisFractionalDemo = () => {
  const cell = (bg, flex) => ({
    borderRadius: "0.5rem",
    padding: "0.5rem 0.35rem",
    fontSize: "0.7rem",
    fontWeight: 700,
    color: "#ffffff",
    textAlign: "center",
    boxShadow: "0 4px 12px rgba(15, 23, 42, 0.15)",
    background: bg,
    flex,
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap"
  });
  const row = (label, children) => <div key={label} className="space-y-2">
      <span className="tw-label">{label}</span>
      <div className="tw-demo-card" style={{
    padding: "0.5rem"
  }}>
        <div style={{
    display: "flex",
    gap: "0.35rem",
    width: "100%"
  }}>{children}</div>
      </div>
    </div>;
  return <div className="not-prose my-6">
      <div className="tw-demo space-y-5">
        {row(".basis-1-2 + .basis-1-2", [<div key="a" style={cell("#2563eb", "0 0 50%")}>
            50%
          </div>, <div key="b" style={cell("#0d9488", "0 0 50%")}>
            50%
          </div>])}
        {row(".basis-1-3 + .basis-2-3", [<div key="a" style={cell("#7c3aed", "0 0 33.333%")}>
            ⅓
          </div>, <div key="b" style={cell("#db2777", "0 0 66.666%")}>
            ⅔
          </div>])}
        {row(".basis-1-4 + .basis-3-4", [<div key="a" style={cell("#ca8a04", "0 0 25%")}>
            ¼
          </div>, <div key="b" style={cell("#0891b2", "0 0 75%")}>
            ¾
          </div>])}
      </div>
    </div>;
};

export const BasisAutoVsZeroDemo = () => {
  const item = (flexBasis, flexGrow) => ({
    background: "#2563eb",
    color: "#ffffff",
    borderRadius: "0.5rem",
    padding: "0.5rem 0.75rem",
    fontSize: "0.75rem",
    fontWeight: 700,
    flex: `${flexGrow} 1 ${flexBasis}`
  });
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.basis-0 + .flex-grow vs .basis-auto</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    gap: "0.5rem",
    width: "100%"
  }}>
            <div style={item("0px", 1)}>Grows</div>
            <div style={item("auto", 0)}>Content width</div>
          </div>
        </div>
      </div>
    </div>;
};

export const BasisSplitDemo = () => {
  const pane = bg => ({
    background: bg,
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.75rem 1rem",
    fontSize: "0.8rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  });
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.flex .basis-1-3 + .basis-2-3</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    gap: "0.75rem",
    width: "100%"
  }}>
            <div style={{
    ...pane("#0d9488"),
    flex: "0 0 33.333%"
  }}>Sidebar</div>
            <div style={{
    ...pane("#2563eb"),
    flex: "0 0 66.666%"
  }}>Main</div>
          </div>
        </div>
      </div>
    </div>;
};

## 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](/sizing/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

<BasisFractionalDemo />

```html theme={null}
<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

<BasisSplitDemo />

```html theme={null}
<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>
```

<BasisAutoVsZeroDemo />

```html theme={null}
<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](/concepts/responsive-utilities) 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

<CardGroup cols={2}>
  <Card title="Flex" href="/flexbox/flex">
    Block and inline flex containers
  </Card>

  <Card title="Flex Grow" href="/flexbox/flex-grow">
    Absorb leftover space along the main axis
  </Card>
</CardGroup>