📪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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

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

Example usage:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

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