justify-content

Aligns items along the main axis in flex or grid containers. Must be used with df(display: flex) or dg(display: grid).

Class List

Class	CSS	Description
`jcfs`	justify-content: flex-start	Aligns items to the start (default)
`jcfe`	justify-content: flex-end	Aligns items to the end
`jcc`	justify-content: center	Centers items
`jcsb`	justify-content: space-between	First/last items at edges, equal gaps between
`jcsa`	justify-content: space-around	Equal gap on both sides (half at edges)
`jcse`	justify-content: space-evenly	All gaps including edges perfectly equal

Visual Comparison

Compares how each justify-content value affects item placement.

flex-start — jcfs

ABC

flex-end — jcfe

ABC

center — jcc

ABC

space-between — jcsb

ABC

space-around — jcsa

ABC

space-evenly — jcse

ABC

space-between vs space-around vs space-evenly

Compares the spacing differences of three space-related values. Note the space between container edges and items.

space-between — jcsb

ABC

Flush to both ends, only gaps between are equal

space-around — jcsa

ABC

Equal gap on both sides of each item (half at edges)

space-evenly — jcse

ABC

All gaps including edges are perfectly equal

When to Use What?

Situation	Recommended	Reason
Center content	`jcc`	Most intuitive center alignment
Header logo + navigation	`jcsb`	Natural header with edge alignment
Evenly spaced tabs/icons	`jcse`	Fully equal spacing including edges
Right-align buttons	`jcfe`	Push to end for right alignment
Default left alignment (reset)	`jcfs`	Reset other alignments in responsive
Equal distribution with margins	`jcsa`	Half spacing at edges

Class Details

`jcfs`justify-content: flex-start

Aligns items to the start of the main axis. The default for flex containers, so rarely needs explicit specification. Used in responsive layouts to revert other alignments.

<!-- Navigation Left aligned -->
<nav class="df jcfs aic gap2rem py16px">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<!-- Responsive: Desktop center, Tablet left -->
<div class="df jcc md-jcfs gap16px">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

`jcfe`justify-content: flex-end

Aligns items to the end of the main axis. Used to right-align buttons or push footer elements to the end.

<!-- Button group Right aligned -->
<div class="df jcfe aic gap12px p2rem">
  <button class="py8px px16px bg27272A cFAFAFA br8px bn cp">Cancel</button>
  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Confirm</button>
</div>

<!-- Card bottom action area -->
<div class="df jcfe aic gap8px pt16px bt1pxsolid27272A">
  <span class="fs12px c71717A">Edit</span>
  <span class="fs12px c71717A">Delete</span>
</div>

`jcc`justify-content: center

Centers items along the main axis. Most commonly used for content centering, modal internal alignment, CTA button groups, etc. Combined with aic for full center alignment.

<!-- Fully center aligned -->
<div class="df jcc aic h100vh">
  <div class="p4rem bg18181B br8px tac">
    <h2 class="fs2rem fw700 cFAFAFA mb8px">Welcome</h2>
    <p class="fs14px c71717A">Center aligned content</p>
  </div>
</div>

<!-- CTA Button group -->
<div class="df jcc gap16px mt2rem">
  <button class="py12px px2-4rem bg6366F1 cFFFFFF br8px bn cp">Get Started</button>
  <button class="py12px px2-4rem bg27272A cFAFAFA br8px bn cp">Learn More</button>
</div>

`jcsb`justify-content: space-between

Places the first item at the start and the last item at the end, distributing remaining gaps evenly. Most commonly used for edge alignment such as header logo and navigation, card bottom price and button, etc.

<!-- Header: Logo + Navigation -->
<header class="df jcsb aic px2rem py16px">
  <div class="fs2rem fw700 cFAFAFA">Logo</div>
  <nav class="df gap2rem">
    <a href="#" class="c71717A tdn">Home</a>
    <a href="#" class="c71717A tdn">About</a>
    <a href="#" class="c71717A tdn">Contact</a>
  </nav>
</header>

<!-- Card bottom: price + buy button -->
<div class="df jcsb aic pt16px bt1pxsolid27272A">
  <span class="fs2rem fw700 cFAFAFA">$29.00</span>
  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Buy</button>
</div>

2-item tip

jcsb with only 2 items naturally creates left-right edge alignment. Most commonly used for header logo+menu pattern.

`jcsa`justify-content: space-around

Gives equal spacing on both sides of each item. Edge spacing is half of the inter-item spacing. Used for tab menus, icon groups, etc.

<!-- Tab menu -->
<div class="df jcsa aic bb1pxsolid27272A">
  <button class="py12px px16px cFAFAFA bn bg0F0F17 cp bb2pxsolid6366F1">All</button>
  <button class="py12px px16px c71717A bn bg0F0F17 cp">Popular</button>
  <button class="py12px px16px c71717A bn bg0F0F17 cp">Latest</button>
  <button class="py12px px16px c71717A bn bg0F0F17 cp">Featured</button>
</div>

<!-- Icon group -->
<div class="df jcsa aic py2rem">
  <div class="tac">
    <div class="fs2-4rem mb4px">📦</div>
    <span class="fs12px c71717A">Shipping</span>
  </div>
  <div class="tac">
    <div class="fs2-4rem mb4px">🔒</div>
    <span class="fs12px c71717A">Security</span>
  </div>
  <div class="tac">
    <div class="fs2-4rem mb4px">💬</div>
    <span class="fs12px c71717A">Support</span>
  </div>
</div>

`jcse`justify-content: space-evenly

Distributes all spacing perfectly evenly including edges. Used when the most uniform spacing is needed. Suitable for dashboard stat cards, bottom navigation, etc.

<!-- Dashboard stat cards -->
<div class="df jcse aic py2-4rem">
  <div class="tac">
    <p class="fs2-4rem fw700 cFAFAFA">1,234</p>
    <p class="fs12px c71717A mt4px">Users</p>
  </div>
  <div class="tac">
    <p class="fs2-4rem fw700 cFAFAFA">567</p>
    <p class="fs12px c71717A mt4px">Orders</p>
  </div>
  <div class="tac">
    <p class="fs2-4rem fw700 cFAFAFA">89%</p>
    <p class="fs12px c71717A mt4px">Satisfaction</p>
  </div>
</div>

<!-- Bottom navigation (mobile) -->
<nav class="df jcse aic py12px bg18181B bt1pxsolid27272A">
  <a href="#" class="tac tdn c71717A">
    <div class="fs2rem">🏠</div>
    <span class="fs12px">Home</span>
  </a>
  <a href="#" class="tac tdn c71717A">
    <div class="fs2rem">🔍</div>
    <span class="fs12px">Search</span>
  </a>
  <a href="#" class="tac tdn c71717A">
    <div class="fs2rem">👤</div>
    <span class="fs12px">Profile</span>
  </a>
</nav>

Responsive

Combined with media query prefixes, you can change alignment based on screen size.

<!-- Desktop center, tablet and below left aligned -->
<div class="df jcc md-jcfs gap16px">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

<!-- Desktop space-between, mobile center -->
<div class="df jcsb sm-jcc gap16px">
  <span>Logo</span>
  <span>Menu</span>
</div>

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Class Combination	Behavior
`df jcc md-jcfs`	Default center, left-aligned at 1024px and below
`df jcsb sm-jcc`	Default space-between, center at 768px and below
`df jcfs lg-jcc`	Default left, center at 1280px and below
`df jcse sm-jcsb`	Default even, space-between at 768px and below
`df jcc md-jcfe`	Default center, right-aligned at 1024px and below

Tips & Notes

Varies by main axis direction

justify-content acts along the main axis direction. In fdr(default) it aligns horizontally, in fdc it aligns vertically.

Use align-items for cross axis

For cross-axis alignment, use align-items classes such as aic, aifs, aife, etc.

jcsb + 2 items = left-right alignment

With jcsb and only 2 items, one is placed at the left end and the other at the right end. Optimal for header logo+menu pattern.

Supported in both flex and grid

justify-content works identically in both df(flex) and dg(grid) containers.

align-items align-content flex-direction gap display

justify-content

Class List

Visual Comparison

space-between vs space-around vs space-evenly

When to Use What?

Class Details

jcfsjustify-content: flex-start

jcfejustify-content: flex-end

jccjustify-content: center

jcsbjustify-content: space-between

jcsajustify-content: space-around

jcsejustify-content: space-evenly