❮ Previous

Flex Best Practices

  • Best practices for clean and scalable flex layouts.

  • Why Best Practices Matter More Than Syntax

    Learning Flexbox utilities is easy.
    Using them correctly is what separates:

    • Beginners

    • From professional frontend developers

    Most layout problems in real projects happen not because Flexbox is weak, but because:

    • The wrong layout system is chosen

    • Flexbox is misused

    • Mental models are unclear

    This lesson fixes that.

    Flexbox vs Grid - The Core Difference

    Before choosing utilities, understand what each system is designed for.

    Flexbox

    • One-dimensional layout

    • Works in one direction at a time

    • Best for alignment and distribution

    Grid

    • Two-dimensional layout

    • Controls rows and columns together

    • Best for page-level structure

    Rule to remember:

    Flexbox = alignment & flow
    Grid = layout & structure

    When You Should Use Flexbox

    Use Flexbox when:

    Layout Is One-Dimensional

    Examples:

    • Horizontal menus

    • Vertical stacks

    • Rows of cards

    • Button groups

Flexbox Button Group

flex arranges buttons in a horizontal row and gap-4 adds spacing between them. 

<div class="flex gap-4">
  <button>Save</button>
  <button>Cancel</button>
</div>

  • Content Size Is Dynamic

    Flexbox adapts naturally when:

    • Text length changes

    • Buttons resize

    • Content comes from APIs

Flex Layout with Dynamic Content

grow lets the text expand while shrink-0 keeps the icon from shrinking. 

<div class="flex items-center">
  <span class="shrink-0">Icon</span>
  <p class="grow">Dynamic text content</p>
</div>

  • Alignment Is the Main Goal

    Flexbox shines at:

    • Vertical centering

    • Horizontal centering

    • Equal spacing

Centered Content with Flex

items-center vertically centers and justify-center horizontally centers content. 

<div class="flex items-center justify-center h-64">
  Centered content
</div>

  • Responsive Direction Changes

    Flexbox makes direction switching easy.

Responsive Flex Direction Change

flex-col stacks items on small screens and md:flex-row switches to a horizontal layout on larger screens. 

<div class="flex flex-col md:flex-row gap-4">
  <aside>Sidebar</aside>
  <main>Content</main>
</div>

  • When You Should Use Grid Instead

    Do not force Flexbox when:

    You Need Rows AND Columns

    Examples:

    • Dashboards

    • Gallery layouts

    • Complex page layouts

Grid Layout

grid-cols-3 creates three columns and gap-4 adds spacing between grid items. 

<div class="grid grid-cols-3 gap-4">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

  • Grid is clearer and more maintainable here.

    Layout Has Fixed Structure

    If design says:

    • “3 columns on desktop”

    • “2 columns on tablet”

    • “1 column on mobile”

    Grid is the right tool.

    You Are Fighting Flexbox

    If you find yourself:

    • Using lots of order-*

    • Nesting flex containers deeply

    • Adding hacks to align rows

    That’s a signal:

    You are using Flexbox for a Grid problem.

    Flexbox + Grid Together 

    In real projects:

    • Grid handles page layout

    Flexbox handles component layout

Combining Grid and Flex Layout

grid manages the page structure while flex organizes elements inside the main content. 

<div class="grid grid-cols-12 gap-6">
  <aside class="col-span-3">
    <!-- sidebar -->
  </aside>
  <main class="col-span-9 flex flex-col gap-4">
    <!-- flex used inside grid -->
  </main>
</div>

  • This is industry standard.

    Common Flexbox Mistakes

    Forgetting flex on the Parent

    <!-- This will NOT work -->

    <div class="items-center justify-between">

    Flex utilities only work if:

    <div class="flex items-center justify-between">

    Mixing Up justify-* and items-*

    Beginners often expect:

    items-center

    to center horizontally.

    Reality:

    • justify-* → main axis

    • items-* → cross axis

    Direction decides meaning.

    Using Margins Instead of gap

    <!-- Old pattern -->

    <div class="flex">

      <div class="mr-4">Item</div>

    </div>

    Correct:

    <div class="flex gap-4">

    Overusing order-*

    Ordering should:

    • Solve responsiveness

    • Not fix bad HTML structure

    Bad practice:

    • Reordering everything visually

    • Breaking reading order

      Forgetting flex-wrap

      <div class="flex">

        <!-- items overflow -->

      </div>

      If wrapping is expected:

      <div class="flex flex-wrap">

      Ignoring shrink-0 on Fixed Items

      Common issue:

      • Icons or buttons get squished

      Fix:

      <img class="shrink-0">

      Using Flexbox for Page Layouts

      Flexbox is not ideal for:

      • Full dashboards

      • Complex grids

      • Multi-row structures

      That’s a Grid job.

      Flexbox Decision Checklist

      Before choosing Flexbox, ask:

      1. Is this layout one-directional ?

      2. Is alignment the main concern ?

      3. Does content size vary ?

      4. Will items flow naturally ?

      If yes → Flexbox

      If not → Grid

      Best Practices for Flexbox in Tailwind

      • Always decide direction first

      • Think in axes (main vs cross)

      • Use gap instead of margins

      • Keep HTML order logical

      • Use flex-1 and shrink-0 intentionally

      • Combine Flexbox with Grid wisely

    ❮ Previous