❮ Previous Next ❯

Alignment Utilities

  • Control horizontal and vertical alignment in flex layouts.

  • Why Advanced Alignment Utilities Matter

    So far, you’ve learned:

    • justify-* → main axis alignment (container-level)

    • items-* → cross-axis alignment (container-level)

    But real UIs often need:

    • One item aligned differently from others

    • Control over alignment when items wrap

    • Fine-grained layout control without extra wrappers

    In Tailwind CSS, this is handled using:

    • Item-level alignment (align-self)

    • Wrapped-content alignment (place-content)

    align-self (Item-Level Alignment)

    What is align-self ?

    align-self allows one flex item to override the container’s align-items setting.

    In simple terms:

    “This item aligns differently from the rest.”

    This is extremely useful in:

    • Chat bubbles

    • Cards with action buttons

    • Mixed-size elements

      Tailwind Utilities for align-self

      Syntax:

      self-{value}

      ClassEffect
      self-autoDefault (inherits container)
      self-startAlign to start
      self-centerAlign to center
      self-endAlign to end
      self-stretchStretch item

    Align Self

    self-* utilities override the container alignment for individual flex items. 

    <div class="flex items-start h-32 bg-gray-100 gap-4 p-4">
  <div class="bg-blue-200 p-2">Item 1</div>
  <div class="bg-green-200 p-2 self-center">Item 2</div>
  <div class="bg-red-200 p-2 self-end">Item 3</div>
</div>

    • Result:

      • Item 1 → top

      • Item 2 → center

      • Item 3 → bottom

      All inside the same container.

    Message Alignment

    self-start aligns incoming messages left and self-end aligns outgoing messages to the right. 

    <div class="flex flex-col gap-2">
  <div class="self-start bg-gray-200 p-3 rounded">
    Incoming message
  </div>
  <div class="self-end bg-blue-600 text-white p-3 rounded">
    Outgoing message
  </div>
</div>

    • place-content (Wrapped Content Alignment)

      What is place-content ?

      place-content controls how rows or columns are aligned when flex items wrap.

      It is a shorthand for:

      • align-content

      • justify-content

      Important:

      place-content only works when flex-wrap is enabled.

      Tailwind Utilities for place-content

      Syntax:

      place-content-{value}

      ClassEffect
      place-content-startPack items at start
      place-content-centerCenter wrapped rows
      place-content-endPack at end
      place-content-betweenSpace between rows
      place-content-aroundSpace around rows
      place-content-evenlyEqual spacing

    Place Content Alignment

    place-content-center centers wrapped rows and columns inside the flex container. 

    <div class="flex flex-wrap place-content-center h-64 bg-gray-100 gap-4">
  <div class="w-24 h-24 bg-blue-200"></div>
  <div class="w-24 h-24 bg-green-200"></div>
  <div class="w-24 h-24 bg-red-200"></div>
  <div class="w-24 h-24 bg-yellow-200"></div>
</div>

    • Result:

      • Items wrap into rows

      • Rows are centered vertically and horizontally

        Difference Between items-* and place-content-*

        This is a common confusion point.

        UtilityControls
        items-*Alignment of items within a row
        place-content-*Alignment of wrapped rows

        Rule:

        items-* → item alignment
        place-content-* → row/column alignment

      Wrapped Content Distribution

      place-content-between distributes wrapped rows with space between them inside the container. 

      <div class="flex flex-wrap place-content-between h-80 bg-gray-50 p-4 gap-4">
  <div class="w-32 h-20 bg-white shadow"></div>
  <div class="w-32 h-20 bg-white shadow"></div>
  <div class="w-32 h-20 bg-white shadow"></div>
  <div class="w-32 h-20 bg-white shadow"></div>
</div>

      • Used in:

        • Dashboards

        • Card galleries

        • Responsive content grids

      Combine Self Alignment and Place Content

      place-content-center aligns wrapped rows in the container while self-* controls alignment of individual items. 

      <div class="flex flex-wrap place-content-center h-64 gap-4">
  <div class="w-24 h-24 bg-blue-200 self-start"></div>
  <div class="w-24 h-24 bg-green-200 self-center"></div>
  <div class="w-24 h-24 bg-red-200 self-end"></div>
</div>

      • This gives:

        • Row-level alignment via place-content

        • Item-level overrides via self-*

          Accessibility & UX Considerations

          • Do not use align-self to break logical reading order

          • Use visual alignment carefully

          • Ensure content flow still makes sense

          • Test keyboard navigation

          Alignment should enhance clarity, not confuse users.

          Common Mistakes

          • Using self-* instead of items-* unnecessarily

          • Expecting place-content to work without flex-wrap

          • Confusing justify-* with place-content-*

          • Over-aligning elements visually

          • Forgetting container height

          Alignment utilities work only when space exists.

          Best Practices for Alignment Utilities

          • Use items-* for global alignment

          • Use self-* for exceptions

          • Enable flex-wrap before using place-content

          • Keep alignment simple and consistent

          • Test on multiple screen sizes

        ❮ Previous Next ❯