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

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

***

**`.a-content-initial`**

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

CSS equivalent: `align-content: initial;`

Example usage:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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