What is Flex basis and sizing in Tailwind?

Tailwindmarkup~5 mins

Flex basis and sizing in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Flex basis and sizing help control how much space a flexible item takes inside a container. It makes layouts neat and balanced.

You want a box to start with a specific width before growing or shrinking.

You need items in a row to share space evenly or with custom sizes.

You want to make a responsive layout that adjusts nicely on different screens.

You want to prevent a flex item from getting too small or too big.

You want to set a minimum or maximum size for flexible boxes.

Syntax

Tailwind

flex-basis-{size}
flex-grow
flex-shrink
basis-{size}
min-w-{size}
max-w-{size}

flex-basis sets the initial size of a flex item before it grows or shrinks.

In Tailwind, basis-{size} sets flex-basis, and flex-grow or flex-shrink control growing or shrinking.

Examples

Three boxes with flex-basis set to 25%, 50%, and 25% of the container width.

Tailwind

<div class="flex">
  <div class="basis-1/4">Box 1</div>
  <div class="basis-1/2">Box 2</div>
  <div class="basis-1/4">Box 3</div>
</div>

First box has fixed width 8rem, second box grows to fill remaining space.

Tailwind

<div class="flex">
  <div class="basis-32">Fixed 8rem width</div>
  <div class="flex-grow">Grows to fill space</div>
</div>

First box won't shrink smaller than its basis, second box can shrink.

Tailwind

<div class="flex">
  <div class="basis-1/3 flex-shrink-0">No shrink</div>
  <div class="basis-2/3">Shrinks if needed</div>
</div>

Sample Program

This page shows a flex container with three boxes sized by flex-basis using Tailwind's basis-1/4 and basis-1/2 classes. The boxes have background colors and padding for clarity.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Flex Basis and Sizing Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Flex Basis and Sizing with Tailwind</h1>
  <div class="flex border border-gray-400 rounded">
    <div class="basis-1/4 bg-blue-300 p-4 text-center">25% width</div>
    <div class="basis-1/2 bg-green-300 p-4 text-center">50% width</div>
    <div class="basis-1/4 bg-red-300 p-4 text-center">25% width</div>
  </div>
</body>
</html>

OutputSuccess

Important Notes

Use basis-{size} to set the starting size of a flex item.

Combine with flex-grow or flex-shrink to control how items grow or shrink.

Sizes can be fractions like basis-1/3, fixed units like basis-32 (8rem), or custom values.

Summary

Flex basis sets the initial size of a flex item before it grows or shrinks.

Tailwind uses basis-{size} classes to control flex basis easily.

Combine flex basis with grow and shrink classes for flexible, responsive layouts.