# 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codennerd.gitbook.io/cxcss/product-guides/flexbox-and-grid/justify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.