📪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.
Last updated