Flex

Sets how a flex item grows or shrinks to fit available space. This shorthand combines flex-grow, flex-shrink, and flex-basis into a single declaration, controlling how items resize within their container. Understanding the flex utility is key to creating responsive, flexible layouts where elements adapt properly to different screen sizes and content amounts.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="flex gap-4">
  <div class="flex-1 p-4 bg-blue-100">flex-1: Grows and shrinks as needed</div>
  <div class="flex-1 p-4 bg-blue-200">flex-1: Equal growing with sibling</div>
</div>

Examples

Basic flex-1 example where items grow equally to fill the container

<div class="flex gap-4">
  <div class="flex-1 p-4 bg-blue-100">flex-1: Grows and shrinks as needed</div>
  <div class="flex-1 p-4 bg-blue-200">flex-1: Equal growing with sibling</div>
</div>

Edit in playground

Comparing flex-none, flex-1, and flex-initial behaviors

<div class="flex gap-4">
  <div class="flex-none w-32 p-4 bg-blue-100">Fixed width</div>
  <div class="flex-1 p-4 bg-blue-200">Flexible width</div>
  <div class="flex-initial w-64 p-4 bg-blue-300">Initial width, can shrink</div>
</div>

Edit in playground

Common sidebar layout pattern using flex utilities

<!-- Sidebar and main content layout -->
<div class="flex flex-col md:flex-row h-screen">
  <!-- Sidebar - fixed width on desktop, full width on mobile -->
  <div class="flex-none md:w-64 bg-gray-100 p-4 border-b md:border-r md:border-b-0">
    <h2 class="font-bold text-lg mb-4">Sidebar</h2>
    <nav class="space-y-2">
      <a href="#" class="block px-3 py-2 rounded hover:bg-gray-200">Dashboard</a>
      <a href="#" class="block px-3 py-2 rounded hover:bg-gray-200">Projects</a>
      <a href="#" class="block px-3 py-2 rounded hover:bg-gray-200">Calendar</a>
      <a href="#" class="block px-3 py-2 rounded hover:bg-gray-200">Reports</a>
    </nav>
  </div>
  <!-- Main content - grows to fill remaining space -->
  <div class="flex-1 overflow-auto p-6">
    <h1 class="text-2xl font-bold mb-6">Main Content</h1>
    <p class="mb-4">This area will grow to fill all available space. The sidebar has a fixed width on desktop, but expands to full width on mobile.</p>
    <p>The layout is responsive and will stack vertically on smaller screens.</p>
  </div>
</div>

Edit in playground

Form layout with consistent label widths and flexible input fields

<!-- Form with label and input field alignment -->
<form class="max-w-md space-y-4">
  <div class="flex flex-wrap items-center gap-4">
    <label for="name" class="flex-none w-24">Name:</label>
    <input id="name" type="text" class="flex-1 min-w-64 border rounded px-3 py-2">
  </div>
  <div class="flex flex-wrap items-center gap-4">
    <label for="email" class="flex-none w-24">Email:</label>
    <input id="email" type="email" class="flex-1 min-w-64 border rounded px-3 py-2">
  </div>
  <div class="flex flex-wrap items-start gap-4">
    <label for="message" class="flex-none w-24 pt-2">Message:</label>
    <textarea id="message" class="flex-1 min-w-64 border rounded px-3 py-2 h-32"></textarea>
  </div>
  <div class="self-end mt-6 flex justify-end">
    <button type="button" class="px-4 py-2 border rounded mr-2">Cancel</button>
    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">Save Changes</button>
  </div>
</form>

Edit in playground

Live Preview

Try the Flex utility with different values

Open Interactive Playground

Variants

flex-1: grow and shrink as needed, take up any available space (1 1 0%), flex-auto: grow and shrink based on content size (1 1 auto), flex-initial: shrink but don't grow (0 1 auto), flex-none: don't grow or shrink (0 0 auto)

1autoinitialnone