Browser Support
Flex Direction
Flex Wrap
Flex
Flex Basis
Menu

Tailwind CSS Justify Content

Justify Content is a critical part of the Flexbox and Grid layouts in CSS. It determines how the browser distributes space between and around child elements along the main axis of a container.

Tailwind CSS provides a set of utility classes, enabling you to manage content alignment without needing to write custom CSS. This guide will walk you through the available classes, their applications, and how to implement them for conditional and responsive styling.

ClassPropertiesExample
justify-normaljustify-content: normal;<div className="justify-normal"></div>
justify-startjustify-content: flex-start;<div className="justify-start"></div>
justify-endjustify-content: flex-end;<div className="justify-end"></div>
justify-centerjustify-content: center;<div className="justify-center"></div>
justify-betweenjustify-content: space-between;<div className="justify-between"></div>
justify-aroundjustify-content: space-around;<div className="justify-around"></div>
justify-evenlyjustify-content: space-evenly;<div className="justify-evenly"></div>
justify-stretchjustify-content: stretch;<div className="justify-stretch"></div>

Overview of Justify Content

Tailwind CSS provides a variety of utilities to help you align child elements across the main axis, whether you want to align them at the start, center them, or space them evenly across the container.

Justify to the Start

To align child elements to the beginning of the container, use justify-start class:

This is a live editor. Play around with it!
export default function JustifyStart() {
  return (
    <div className="flex justify-start h-screen w-screen">
      {/* This aligns items to the start along the main axis */}
      <img src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Justify to the Center

To align child elements to the center of the container, use justify-center class:

This is a live editor. Play around with it!
export default function JustifyCenter() {
  return (
    <div className="flex justify-center h-screen w-screen">
      {/* Items are centered along the main axis */}
       <img src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Justify to the End

To align child elements to the end of the container, use justify-end class:

This is a live editor. Play around with it!
export default function JustifyEnd() {
  return (
    <div className="flex justify-end h-screen w-screen">
      {/* Items align to the end along the main axis */}
       <img src="https://images.unsplash.com/photo-1517059224940-d4af9eec41b7"
        alt="Monitor Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Keyboard Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Distribute Space with Space Between

To give equal space to the child elements while leaving no extra margin at the container edges, use justify-between:

This is a live editor. Play around with it!
export default function SpaceBetween() {
  return (
    <div className="flex justify-between h-screen w-screen">
      {/* Equal spacing between items along the main axis */}
      <img src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Distribute Space with Space Around

To allocate space uniformly around items, use justify-around:

This is a live editor. Play around with it!
export default function SpaceAround() {
  return (
    <div className="flex justify-around h-screen w-screen">
      {/* Items have equal spacing around them */}
     <img src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Distribute Space with Space Evenly

To allocate even space inside and around the container edges, use justify-evenly:

This is a live editor. Play around with it!
export default function SpaceEvenly() {
  return (
    <div className="flex justify-evenly h-screen w-screen">
      {/* Items are spaced evenly along the main axis */}
      <img src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Distribute Space with Stretch

To stretch the items to take all the available space, use justify-stretch:

This is a live editor. Play around with it!
export default function StetchItems() {
  return (
    <div className="flex justify-stretch gap-2 h-screen w-screen">
      {/* Items are stretched along the main axis */}
      <img src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 h-24 border-2 border-black"
      />
      <img src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 h-24 border-2 border-black"
      />
    </div>
  );
}

Normal Justify Alignment

To set the items to normal alignment as if there was no justify-* value, use justify-normal:

This is a live editor. Play around with it!
export default function NormalAlignment() {
  return (
    <div className="flex justify-normal h-screen w-screen">
      {/* Items are spaced normally along the main axis */}
      <img src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

States and Responsiveness

Tailwind makes it possible to use conditional and responsive styling, where you can apply justify content classes based on user interactions or screen sizes.

Hover and Focus States

Use hover states or focus states to adjust alignment dynamically.

This is a live editor. Play around with it!
export default function HoverJustify() {
  return (
    <div className="flex hover:justify-end h-screen w-screen">
      {/* Alignment changes on hover */}
      <img src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Breakpoint Modifiers

Adapt justify content classes based on varying screen sizes like sm, md, lg, etc.

This is a live editor. Play around with it!
export default function ResponsiveJustify() {
  return (
    <div className="flex sm:justify-start md:justify-center lg:justify-end h-screen w-screen">
      {/* Conditional alignment based on screen size */}
      <img src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stationary Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
      <img src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Office Desk Image"
        className="m-2 w-24 h-24 border-2 border-black"
      />
    </div>
  );
}

Real World Examples

E-commerce Product Grid with Category Filters

This example shows how to create a responsive product grid with category filters using justify-between for spacing.

This is a live editor. Play around with it!
export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Premium Leather Wallet",
      price: "$79.99",
      category: "Accessories",
      src: "https://images.unsplash.com/photo-1627123424574-724758594e93",
      alt: "Brown leather wallet"
    },
    {
      id: 2,
      name: "Wireless Headphones",
      price: "$199.99",
      category: "Electronics",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
  ];

  return (
    <div className="container mx-auto px-6">
      <div className="flex flex-col justify-center h-28 gap-2">
        <h2 className="text-2xl font-bold">Our Products</h2>
        <div className="flex gap-4">
          <button className="px-4 py-2 bg-gray-200 rounded-lg">All</button>
          <button className="px-4 py-2 bg-gray-200 rounded-lg">Electronics</button>
          <button className="px-4 py-2 bg-gray-200 rounded-lg">Accessories</button>
        </div>
      </div>
      <div className="my-6 grid grid-cols-2 gap-6">
        {products.map(product => (
          <div key={product.id} className="border rounded-lg p-4">
            <img src={product.src} alt={product.alt} className="w-full h-48 object-cover" />
            <h3 className="mt-2 font-semibold">{product.name}</h3>
            <p className="text-gray-600">{product.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Social Media Navigation Bar

This example demonstrates a social media-style navigation bar using justify-around for equal spacing.

This is a live editor. Play around with it!
export default function NavigationBar() {
  const navItems = [
    {
      id: 1,
      icon: "https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0",
      label: "Home",
      notifications: 0
    },
    {
      id: 2,
      icon: "https://images.unsplash.com/photo-1611162616475-46b635cb6868",
      label: "Messages",
      notifications: 3
    },
    // ... add 4 more nav items
  ];

  return (
    <nav className="fixed bottom-0 w-full bg-white border-t">
      <div className="flex justify-around items-center h-16">
        {navItems.map(item => (
          <div key={item.id} className="flex flex-col items-center">
            <div className="relative">
              <img src={item.icon} alt={item.label} className="w-6 h-6 rounded-sm" />
              {item.notifications > 0 && (
                <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
                  {item.notifications}
                </span>
              )}
            </div>
            <span className="text-xs mt-1">{item.label}</span>
          </div>
        ))}
      </div>
    </nav>
  );
}

Team Member Card Grid

This example shows a team member grid using justify-center for centered alignment.

This is a live editor. Play around with it!
export default function TeamGrid() {
  const teamMembers = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "CEO",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile photo",
      social: {
        twitter: "#",
        linkedin: "#"
      }
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Chen profile photo",
      social: {
        twitter: "#",
        linkedin: "#"
      }
    },
    // ... add 4 more team members
  ];

  return (
    <div className="bg-gray-100 py-12">
      <div className="container mx-auto">
        <h2 className="text-3xl font-bold text-center mb-12">Our Team</h2>
        <div className="flex flex-wrap justify-center gap-8">
          {teamMembers.map(member => (
            <div key={member.id} className="bg-white rounded-lg shadow-lg p-6 w-64">
              <img 
                src={member.src} 
                alt={member.alt} 
                className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
              />
              <h3 className="text-xl font-semibold text-center">{member.name}</h3>
              <p className="text-gray-600 text-center mb-4">{member.role}</p>
              <div className="flex justify-center gap-4">
                <a href={member.social.twitter} className="text-blue-400 hover:text-blue-600">
                  Twitter
                </a>
                <a href={member.social.linkedin} className="text-blue-700 hover:text-blue-900">
                  LinkedIn
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Pricing Plan Comparison

This example demonstrates a pricing plan comparison using justify-evenly for equal spacing.

This is a live editor. Play around with it!
export default function PricingComparison() {
  const plans = [
    {
      id: 1,
      name: "Basic",
      price: "$9.99",
      features: ["1 User", "5GB Storage", "Basic Support", "Email Access"],
      recommended: false
    },
    {
      id: 2,
      name: "Pro",
      price: "$29.99",
      features: ["5 Users", "20GB Storage", "Priority Support", "API Access"],
      recommended: true
    },
    // ... add 4 more plans
  ];

  return (
    <div className="bg-gray-50 py-16">
      <div className="container mx-auto">
        <h2 className="text-3xl font-bold text-center mb-12">Pricing Plans</h2>
        <div className="flex justify-evenly flex-wrap gap-8">
          {plans.map(plan => (
            <div 
              key={plan.id} 
              className={`bg-white rounded-xl p-8 w-72 shadow-lg ${
                plan.recommended ? 'ring-2 ring-blue-500' : ''
              }`}
            >
              {plan.recommended && (
                <span className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm">
                  Recommended
                </span>
              )}
              <h3 className="text-2xl font-bold mt-4">{plan.name}</h3>
              <p className="text-4xl font-bold my-4">{plan.price}<span className="text-sm">/month</span></p>
              <ul className="space-y-4">
                {plan.features.map((feature, index) => (
                  <li key={index} className="flex items-center">
                    <svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    {feature}
                  </li>
                ))}
              </ul>
              <button className="w-full mt-8 bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600">
                Choose Plan
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Project Gallery Grid

This example shows a project gallery using justify-start for left-aligned items.

This is a live editor. Play around with it!
export default function ProjectGallery() {
  const projects = [
    {
      id: 1,
      title: "Modern Website Design",
      category: "Web Development",
      src: "https://images.unsplash.com/photo-1522542550221-31fd19575a2d",
      alt: "Website mockup on laptop",
      tags: ["React", "Tailwind", "Node.js"]
    },
    {
      id: 2,
      title: "Mobile App Interface",
      category: "UI/UX Design",
      src: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c",
      alt: "Mobile app interface design",
      tags: ["Figma", "UI Design", "Mobile"]
    },
    // ... add 4 more projects
  ];

  return (
    <div className="container mx-auto p-8">
      <div className="flex flex-col gap-2 items-center mb-8">
        <h2 className="text-3xl font-bold">Our Projects</h2>
        <div className="flex gap-4">
          <select className="border rounded-lg px-4 py-2">
            <option>All Categories</option>
            <option>Web Development</option>
            <option>UI/UX Design</option>
          </select>
        </div>
      </div>
      <div className="flex flex-wrap justify-center gap-6">
        {projects.map(project => (
          <div key={project.id} className="w-[250px] bg-white rounded-xl overflow-hidden shadow-lg">
            <img 
              src={project.src} 
              alt={project.alt} 
              className="w-full h-48 object-cover"
            />
            <div className="p-6">
              <p className="text-sm text-blue-500 mb-2">{project.category}</p>
              <h3 className="text-xl font-bold mb-4">{project.title}</h3>
              <div className="flex flex-wrap gap-2">
                {project.tags.map((tag, index) => (
                  <span 
                    key={index}
                    className="px-3 py-1 bg-gray-100 rounded-full text-sm"
                  >
                    {tag}
                  </span>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Best Practices

Maintain Design Consistency

When working with justify-content in Tailwind CSS, aligning content consistently across your project is critical to maintaining a cohesive design. Use the predefined justify utilities (justify-start, justify-center, justify-between, etc.) to achieve predictable layouts while ensuring uniform behavior. This reduces the chance of visual inconsistencies arising when a design spans multiple components or screens.

For example, consider your navigation and footer features. Consistently use justify-between to space elements evenly in both cases, reinforcing a recognizable layout pattern. Avoid mixing justification styles arbitrarily within the same screen to eliminate jarring experiences and unpredictable designs.

This is a live editor. Play around with it!
export default function HeaderFooter() {
  return (
    <div className="flex flex-col justify-between h-screen">
      <header className="flex justify-between p-4 bg-gray-800 text-white">
        <div>Logo</div>
        <nav className="flex gap-4">
          <a href="#" className="hover:underline">Home</a>
          <a href="#" className="hover:underline">About</a>
        </nav>
      </header>
      <footer className="flex justify-between p-4 bg-gray-900 text-gray-300">
        <span>© 2023 MyCompany</span>
        <div className="flex gap-4">
          <a href="#" className="hover:underline">Privacy</a>
          <a href="#" className="hover:underline">Terms</a>
        </div>
      </footer>
    </div>
  );
}

For projects with multiple contributors, define alignment conventions in documentation or a design system. This provides clarity when scaling components or collaborating across teams, ensuring your justify-content usage remains methodical everywhere.

Leverage Utility Combinations Thoughtfully

Tailwind utility classes simplify complex designs, but combining them thoughtfully is crucial. Pair justify-content with margin and padding utilities for better spacing control. For example, using justify-around within a card design while applying p-4 padding for inner content creates visually appealing spacing without excess CSS. Stick to Tailwind’s prebuilt utilities like gap-* for improved clarity instead of custom CSS.

Always test combined utilities across breakpoints to ensure no unexpected shifts. Responsive layouts may require transitioning between multiple justify-* utilities to build dynamic layouts.

This is a live editor. Play around with it!
export default function UtilityCombination() {
  return (
    <div className="flex justify-around bg-gray-100 p-4 h-screen">
      <div className="w-24 h-24 bg-blue-300 rounded-md"></div>
      <div className="w-24 h-24 bg-blue-300 rounded-md"></div>
      <div className="w-24 h-24 bg-blue-300 rounded-md"></div>
    </div>
  );
}

Accessibility Considerations

Enhance Readability and Navigation Clarity

When using justify-content, always prioritize readability. For instance, using justify-between for navigation links or justify-around for icon lists makes information scannable, reducing cognitive load for users. The spacing generated by these utilities ensures adequate separation, enhancing visual clarity.

This is a live editor. Play around with it!
export default function ReadableNavbar() {
  return (
    <nav className="flex justify-between bg-gray-800 text-white p-4">
        <a href="#" className="text-sm hover:opacity-75">Home</a>
        <a href="#" className="text-sm hover:opacity-75">About</a>
        <a href="#" className="text-sm hover:opacity-75">Products</a>
        <a href="#" className="text-sm hover:opacity-75">Links</a>
    </nav>
  );
}

Support Accessible Interactive Elements

Proper justification improves how users perceive interactive elements. Add correct justify-* utility and give enough spacing to nested flex/grid containers with gap-* to avoid overcrowded layouts that may hinder accessibility.

This is a live editor. Play around with it!
export default function InteractiveForm() {
  return (
    <div className="flex justify-center min-h-screen">
      <div className="w-full max-w-md p-8 bg-white rounded-lg">
        <form className="flex flex-col justify-between space-y-6">
          <div className="flex flex-col gap-4">
            <label htmlFor="username" className="text-gray-700 font-medium">
              Username
            </label>
            <input
              id="username"
              type="text"
              className="px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:outline-none"
              placeholder="Enter your username"
            />
          </div>
          <div className="flex flex-col gap-4">
            <label htmlFor="password" className="text-gray-700 font-medium">
              Password
            </label>
            <input
              id="password"
              type="password"
              className="px-4 py-2 border border-gray-300 rounded-lg focus:ring focus:ring-blue-200 focus:outline-none"
              placeholder="Enter your password"
            />
          </div>
          <div className="flex justify-between">
            <button
              type="submit"
              className="px-6 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition duration-300"
            >
              Submit
            </button>
              <button className="px-6 py-2 bg-blue-500 text-white rounded-lg">
                Register
              </button>
          </div>
        </form>
      </div>
    </div>
  );
}

Debugging Common Issues

Troubleshooting Inconsistent Alignment

If you notice misaligned elements despite using flex and justify-* classes, inspect the container’s flex properties. Misconfigurations such as missing flex on the parent element or unexpected margins on children often cause alignment issues. Use browser dev tools to verify that your alignment classes are applied correctly.

When nested flex containers are involved, test if child elements unintentionally override parent class behavior, leading to misalignment.

This is a live editor. Play around with it!
export default function DebugAlignment() {
  return (
    <div className="container mx-auto">
      {/* Wrap the child elements in 'flex' */}
      <div className="flex justify-around h-screen bg-gray-100 p-4">
        <div className="bg-blue-300 h-24 w-24"></div>
        <div className="bg-blue-300 h-24 w-24"></div>
        <div className="bg-blue-300 h-24 w-24"></div>
      </div>
    </div>
  );
}
Flex ShrinkJustify Items

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy