📪Align

Align Content Classes

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

.a-content-initial

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

CSS equivalent: align-content: initial;

Example usage:

<div class="a-content-initial">This container has the initial align content behavior.</div>

.a-content-inherit

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

CSS equivalent: align-content: inherit;

Example usage:

<div class="a-content-inherit">This container inherits the align content behavior from its parent.</div>

.a-content-center

Sets the align-content property to center, centering the content along the cross axis.

CSS equivalent: align-content: center;

Example usage:

<div class="a-content-center">This container has its content centered along the cross axis.</div>

.a-content-flex-start

Sets the align-content property to flex-start, aligning the content at the start of the container along the cross axis.

CSS equivalent: align-content: flex-start;

Example usage:

<div class="a-content-flex-start">This container has its content aligned at the start along the cross axis.</div>

.a-content-flex-end

Sets the align-content property to flex-end, aligning the content at the end of the container along the cross axis.

CSS equivalent: align-content: flex-end;

Example usage:

<div class="a-content-flex-end">This container has its content aligned at the end along the cross axis.</div>

.a-content-stretch

Sets the align-content property to stretch, stretching the content to fill the container along the cross axis.

CSS equivalent: align-content: stretch;

Example usage:

<div class="a-content-stretch">This container has its content stretched to fill the container along the cross axis.</div>

.a-content-between

Sets the align-content property to space-between, distributing the content evenly along the cross axis with space between them.

CSS equivalent: align-content: space-between;

Example usage:

<div class="a-content-between">This container has its content evenly distributed along the cross axis with space between them.</div>

.a-content-around

Sets the align-content property to space-around, distributing the content evenly along the cross axis with equal space around them.

CSS equivalent: align-content: space-around;

Example usage:

<div class="a-content-around">This container has its content evenly distributed along the cross axis with equal space around them.</div>

.a-content-evenly

Sets the align-content property to space-evenly, distributing the content evenly along the cross axis with equal space around them.

CSS equivalent: align-content: space-evenly;

Example usage:

<div class="a-content-evenly">This container has its content evenly distributed along the cross axis with equal space around them.</div>

These classes can be applied to flex containers to control the alignment of their content along the cross axis.

Certainly! Here's the documentation for the utility classes related to flexbox align items:

Align Items Classes

.a-items-initial

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

CSS equivalent: align-items: initial;

Example usage:

<div class="a-items-initial">This container has the initial align items behavior.</div>

.a-items-inherit

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

CSS equivalent: align-items: inherit;

Example usage:

<div class="a-items-inherit">This container inherits the align items behavior from its parent.</div>

.a-items-baseline

Sets the align-items property to baseline, aligning the items along their baselines.

CSS equivalent: align-items: baseline;

Example usage:

<div class="a-items-baseline">This container has its items aligned along their baselines.</div>

.a-items-stretch

Sets the align-items property to stretch, stretching the items to fill the container along the cross axis.

CSS equivalent: align-items: stretch;

Example usage:

<div class="a-items-stretch">This container has its items stretched to fill the container along the cross axis.</div>

Align Self Classes

.a-self-initial

Sets the align-self property to initial, restoring the default align self behavior for individual flex items.

CSS equivalent: align-self: initial;

Example usage:

<div class="a-self-initial">This item has the initial align self behavior.</div>

.a-self-inherit

Sets the align-self property to inherit, inheriting the align self behavior from its parent flex container.

CSS equivalent: align-self: inherit;

Example usage:

<div class="a-self-inherit">This item inherits the align self behavior from its parent flex container.</div>

.a-self-auto

Sets the align-self property to auto, allowing the flex container to determine the alignment for the individual item.

CSS equivalent: align-self: auto;

Example usage:

<div class="a-self-auto">This item follows the automatic alignment determined by the flex container.</div>

.a-self-start

Sets the align-self property to flex-start, aligning the item to the start of the cross axis within the flex container.

CSS equivalent: align-self: flex-start;

Example usage:

<div class="a-self-start">This item is aligned to the start of the cross axis within the flex container.</div>

.a-self-end

Sets the align-self property to flex-end, aligning the item to the end of the cross axis within the flex container.

CSS equivalent: align-self: flex-end;

Example usage:

<div class="a-self-end">This item is aligned to the end of the cross axis within the flex container.</div>

.a-self-center

Sets the align-self property to center, aligning the item to the center of the cross axis within the flex container.

CSS equivalent: align-self: center;

Example usage:

<div class="a-self-center">This item is aligned to the center of the cross axis within the flex container.</div>

.a-self-baseline

Sets the align-self property to baseline, aligning the item along its baseline within the flex container.

CSS equivalent: align-self: baseline;

Example usage:

<div class="a-self-baseline">This item is aligned along its baseline within the flex container.</div>

.a-self-stretch

Sets the align-self property to stretch, stretching the item to fill the cross axis within the flex container.

CSS equivalent: align-self: stretch;

Example usage:

<div class="a-self-stretch">This item is stretched to fill the cross axis within the flex container.</div>

These classes can be applied to individual flex items within a flex container to control their alignment along the cross axis.