> For the complete documentation index, see [llms.txt](https://codennerd.gitbook.io/cxcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codennerd.gitbook.io/cxcss/product-guides/flexbox-and-grid/justify.md).

# Justify

#### Justify Content Classes

**`.space-between`**

Sets the justify-content property to space-between, distributing items evenly along the main axis with space between them.

CSS equivalent: `justify-content: space-between;`

Example usage:

```html
<div class="space-between">This container has items evenly spaced with space between them.</div>
```

***

**`.j-content-between`**

Alias class for `.space-between`. Sets the justify-content property to space-between.

CSS equivalent: `justify-content: space-between;`

Example usage:

```html
<div class="j-content-between">This container has items evenly spaced with space between them.</div>
```

***

**`.j-content-center`**

Sets the justify-content property to center, aligning items along the main axis at the center of the container.

CSS equivalent: `justify-content: center;`

Example usage:

```html
<div class="j-content-center">This container has items aligned at the center.</div>
```

***

**`.j-content-initial`**

Sets the justify-content property to initial, restoring the default justify content behavior.

CSS equivalent: `justify-content: initial;`

Example usage:

```html
<div class="j-content-initial">This container has the initial justify content behavior.</div>
```

***

**`.j-content-inherit`**

Sets the justify-content property to inherit, inheriting the justify content behavior from its parent.

CSS equivalent: `justify-content: inherit;`

Example usage:

```html
<div class="j-content-inherit">This container inherits the justify content behavior from its parent.</div>
```

***

**`.j-content-start`**

Sets the justify-content property to flex-start, aligning items along the main axis at the start of the container.

CSS equivalent: `justify-content: flex-start;`

Example usage:

```html
<div class="j-content-start">This container has items aligned at the start.</div>
```

***

**`.j-content-end`**

Sets the justify-content property to flex-end, aligning items along the main axis at the end of the container.

CSS equivalent: `justify-content: flex-end;`

Example usage:

```html
<div class="j-content-end">This container has items aligned at the end.</div>
```

***

**`.content-end`**

Sets the justify-content property to flex-end and align-content property to flex-end, aligning the content at the end of the container along both the main and cross axes.

CSS equivalent:

```css
justify-content: flex-end;
align-content: flex-end;
```

Example usage:

```html
<div class="content-end">This container has its content aligned at the end along both the main and cross axes.</div>
```

***

**`.j-content-around`**

Sets the justify-content property to space-around, distributing items evenly along the main axis with equal space around them.

CSS equivalent: `justify-content: space-around;`

Example usage:

```html
<div class="j-content-around">This container has items evenly spaced with equal space around them.</div>
```

***

**`.j-content-evenly`**

Sets the justify-content property to space-evenly, distributing items evenly along the main axis with equal space around them.

CSS equivalent: `justify-content: space-evenly;`

Example usage:

```html
<div class="j-content-evenly">This container has items evenly spaced with equal space around them.</div>
```

#### Justify Items Classes

***

**`.j-items-start`**

Sets the justify-items property to flex-start, aligning items along the inline axis at the start of the container.

CSS equivalent: `justify-items: flex-start;`

Example usage:

```html
<div class="j-items-start">This container has items aligned at the start along the inline axis.</div>
```

***

**`.j-items-end`**

Sets the justify-items property to flex-end, aligning items along the inline axis at the end of the container.

CSS equivalent: `justify-items: flex-end;`

Example usage:

```html
<div class="j-items-end">This container has items aligned at the end along the inline axis.</div>
```

***

**`.j-items-center`**

Sets the justify-items property to center, aligning items along the inline axis at the center of the container.

CSS equivalent: `justify-items: center;`

Example usage:

```html
<div class="j-items-center">This container has items aligned at the center along the inline axis.</div>
```

***

**`.j-items-baseline`**

Sets the justify-items property to baseline, aligning items along the inline axis based on their baseline.

CSS equivalent: `justify-items: baseline;`

Example usage:

```html
<div class="j-items-baseline">This container has items aligned based on their baseline along the inline axis.</div>
```

***

**`.j-items-stretch`**

Sets the justify-items property to stretch, stretching items along the inline axis to fill the container.

CSS equivalent: `justify-items: stretch;`

Example usage:

```html
<div class="j-items-stretch">This container has items stretched to fill the container along the inline axis.</div>
```

***

**`.j-items-initial`**

Sets the justify-items property to initial, restoring the default justify items behavior.

CSS equivalent: `justify-items: initial;`

Example usage:

```html
<div class="j-items-initial">This container has the initial justify items behavior.</div>
```

***

**`.j-items-inherit`**

Sets the justify-items property to inherit, inheriting the justify items behavior from its parent.

CSS equivalent: `justify-items: inherit;`

Example usage:

```html
<div class="j-items-inherit">This container inherits the justify items behavior from its parent.</div>
```

#### Justify Self Classes

***

**`.j-self-auto`**

Sets the justify-self property to auto, allowing the item to inherit its parent's justify content value.

CSS equivalent: `justify-self: auto;`

Example usage:

```html
<div class="j-self-auto">This item inherits its parent's justify content value.</div>
```

***

**`.j-self-start`**

Sets the justify-self property to flex-start, aligning the item at the start of the container along the main axis.

CSS

equivalent: `justify-self: flex-start;`

Example usage:

```html
<div class="j-self-start">This item is aligned at the start along the main axis.</div>
```

***

**`.j-self-end`**

Sets the justify-self property to flex-end, aligning the item at the end of the container along the main axis.

CSS equivalent: `justify-self: flex-end;`

Example usage:

```html
<div class="j-self-end">This item is aligned at the end along the main axis.</div>
```

***

**`.j-self-center`**

Sets the justify-self property to center, aligning the item at the center of the container along the main axis.

CSS equivalent: `justify-self: center;`

Example usage:

```html
<div class="j-self-center">This item is aligned at the center along the main axis.</div>
```

***

**`.j-self-baseline`**

Sets the justify-self property to baseline, aligning the item based on its baseline along the main axis.

CSS equivalent: `justify-self: baseline;`

Example usage:

```html
<div class="j-self-baseline">This item is aligned based on its baseline along the main axis.</div>
```

***

**`.j-self-stretch`**

Sets the justify-self property to stretch, stretching the item to fill the container along the main axis.

CSS equivalent: `justify-self: stretch;`

Example usage:

```html
<div class="j-self-stretch">This item is stretched to fill the container along the main axis.</div>
```

***

**`.j-self-initial`**

Sets the justify-self property to initial, restoring the default justify self behavior.

CSS equivalent: `justify-self: initial;`

Example usage:

```html
<div class="j-self-initial">This item has the initial justify self behavior.</div>
```

***

**`.j-self-inherit`**

Sets the justify-self property to inherit, inheriting the justify self behavior from its parent.

CSS equivalent: `justify-self: inherit;`

Example usage:

```html
<div class="j-self-inherit">This item inherits the justify self behavior from its parent.</div>
```