# Justify

Utilities for controlling main-axis justification of flex and grid items (justify-content, justify-items, justify-self).

**Category:** Utilities
**CSS source:** `https://cdn.ux4g.gov.in/UX4G@3.0.18/utilities/justify.utilities.css`
**Repository source:** `src/utilities/justify.utilities.css`
**Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-justify--introduction

## Class reference

| Class | CSS declaration |
|---|---|
| `ux4g-jc-start` | `justify-content: flex-start` |
| `ux4g-jc-end` | `justify-content: flex-end` |
| `ux4g-jc-center` | `justify-content: center` |
| `ux4g-jc-between` | `justify-content: space-between` |
| `ux4g-jc-around` | `justify-content: space-around` |
| `ux4g-jc-evenly` | `justify-content: space-evenly` |
| `ux4g-ji-start` | `justify-items: start` |
| `ux4g-ji-end` | `justify-items: end` |
| `ux4g-ji-center` | `justify-items: center` |
| `ux4g-ji-stretch` | `justify-items: stretch` |
| `ux4g-ji-normal` | `justify-items: normal` |
| `ux4g-ji-center-safe` | `justify-items: safe center` |
| `ux4g-ji-end-safe` | `justify-items: safe end` |
| `ux4g-js-auto` | `justify-self: auto` |
| `ux4g-js-start` | `justify-self: start` |
| `ux4g-js-end` | `justify-self: end` |
| `ux4g-js-center` | `justify-self: center` |
| `ux4g-js-stretch` | `justify-self: stretch` |
| `ux4g-js-center-safe` | `justify-self: safe center` |
| `ux4g-js-end-safe` | `justify-self: safe end` |

Responsive variants available (42 total). Pattern: `ux4g-{breakpoint}-...` where breakpoint is `sm`, `md`, `lg`, `xl`, or `2xl`.

## Usage

Use the documented variants and class names. If exact markup is still required after checking this page and the catalog, use the linked Storybook page as the final fallback.

## Usage

Use Justify utilities to apply their named visual or layout behaviour directly to an element. Combine them with semantic component classes; do not create replacement CSS unless the documented utilities cannot meet the requirement.

## Reference paths

- Documentation: `https://doc.ux4g.gov.in/web/llms/utilities/justify.md`
- Exact CSS: `https://cdn.ux4g.gov.in/UX4G@3.0.18/utilities/justify.utilities.css`

## Exact CSS

### https://cdn.ux4g.gov.in/UX4G@3.0.18/utilities/justify.utilities.css

```css
/* =========================================
   JUSTIFY UTILITIES
   Controls justification of flex/grid items.
   1. Justify Content (jc)
   2. Justify Items (ji)
   3. Justify Self (js)
   Approach: Desktop-first
   Breakpoints:
     Desktop (base): 1024px - 1439px (no query)
     Desktop XL (xl): >= 1440px
     Tablet (md): <= 1023px
     Mobile (sm): <= 767px
========================================= */

/* 1.0 JUSTIFY CONTENT */
.ux4g-jc-start { justify-content: flex-start; }
.ux4g-jc-end { justify-content: flex-end; }
.ux4g-jc-center { justify-content: center; }
.ux4g-jc-between { justify-content: space-between; }
.ux4g-jc-around { justify-content: space-around; }
.ux4g-jc-evenly { justify-content: space-evenly; }

/* 2.0 JUSTIFY ITEMS */
.ux4g-ji-start { justify-items: start; }
.ux4g-ji-end { justify-items: end; }
.ux4g-ji-center { justify-items: center; }
.ux4g-ji-stretch { justify-items: stretch; }
.ux4g-ji-normal { justify-items: normal; }
.ux4g-ji-center-safe { justify-items: safe center; }
.ux4g-ji-end-safe { justify-items: safe end; }

/* 3.0 JUSTIFY SELF */
.ux4g-js-auto { justify-self: auto; }
.ux4g-js-start { justify-self: start; }
.ux4g-js-end { justify-self: end; }
.ux4g-js-center { justify-self: center; }
.ux4g-js-stretch { justify-self: stretch; }
.ux4g-js-center-safe { justify-self: safe center; }
.ux4g-js-end-safe { justify-self: safe end; }


/* ================= RESPONSIVE ================= */

/* ================= XL 1440px - 1920px (Desktop XL) ================= */
@media (min-width: 1440px) and (max-width: 1920px) {
  .ux4g-xl-jc-start { justify-content: flex-start; }
  .ux4g-xl-jc-end { justify-content: flex-end; }
  .ux4g-xl-jc-center { justify-content: center; }
  .ux4g-xl-jc-between { justify-content: space-between; }
  .ux4g-xl-jc-around { justify-content: space-around; }
  .ux4g-xl-jc-evenly { justify-content: space-evenly; }

  .ux4g-xl-ji-start { justify-items: start; }
  .ux4g-xl-ji-end { justify-items: end; }
  .ux4g-xl-ji-center { justify-items: center; }
  .ux4g-xl-ji-stretch { justify-items: stretch; }

  .ux4g-xl-js-start { justify-self: start; }
  .ux4g-xl-js-end { justify-self: end; }
  .ux4g-xl-js-center { justify-self: center; }
  .ux4g-xl-js-stretch { justify-self: stretch; }
}

/* ================= MD 768px - 1023px (Tablet) ================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .ux4g-md-jc-start { justify-content: flex-start; }
  .ux4g-md-jc-end { justify-content: flex-end; }
  .ux4g-md-jc-center { justify-content: center; }
  .ux4g-md-jc-between { justify-content: space-between; }
  .ux4g-md-jc-around { justify-content: space-around; }
  .ux4g-md-jc-evenly { justify-content: space-evenly; }

  .ux4g-md-ji-start { justify-items: start; }
  .ux4g-md-ji-end { justify-items: end; }
  .ux4g-md-ji-center { justify-items: center; }
  .ux4g-md-ji-stretch { justify-items: stretch; }

  .ux4g-md-js-start { justify-self: start; }
  .ux4g-md-js-end { justify-self: end; }
  .ux4g-md-js-center { justify-self: center; }
  .ux4g-md-js-stretch { justify-self: stretch; }
}

/* ================= SM 320px - 767px (Mobile) ================= */
@media (min-width: 320px) and (max-width: 767px) {
  .ux4g-sm-jc-start { justify-content: flex-start; }
  .ux4g-sm-jc-end { justify-content: flex-end; }
  .ux4g-sm-jc-center { justify-content: center; }
  .ux4g-sm-jc-between { justify-content: space-between; }
  .ux4g-sm-jc-around { justify-content: space-around; }
  .ux4g-sm-jc-evenly { justify-content: space-evenly; }

  .ux4g-sm-ji-start { justify-items: start; }
  .ux4g-sm-ji-end { justify-items: end; }
  .ux4g-sm-ji-center { justify-items: center; }
  .ux4g-sm-ji-stretch { justify-items: stretch; }

  .ux4g-sm-js-start { justify-self: start; }
  .ux4g-sm-js-end { justify-self: end; }
  .ux4g-sm-js-center { justify-self: center; }
  .ux4g-sm-js-stretch { justify-self: stretch; }
}
```

## Accessibility notes

- Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility.
- Ensure color contrast meets WCAG 2.1 AA.
- Test responsive and RTL behavior where utility classes rely on logical properties.