Primer CSS Flexbox Align Self

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other.

Primer CSS Flexbox Align Self classes are used to adjust the alignment of an individual flex item on the cross axis. If there is any align-item property applied then these classes will be over-written to those properties. There are six types of Align Self classes in Primer CSS as described below.

Primer CSS Flexbox Align Self Classes:

• flex-self-auto: This class is used to align specific flex items according to the parent.
• flex-self-start: This class is used to align specific flex items to the start of the cross axis.
• flex-self-end: This class is used to align specific flex items to the end of the cross axis.
• flex-self-center: This class is used to align specific flex items to the center of the cross axis.
• flex-self-baseline: This class is used to align specific flex items to the baseline of the cross axis.
• flex-self-stretch: This class is used to stretch specific flex items from the start of the cross-axis to the end of the cross axis.

Syntax:

<div class="border d-flex ">
 <div class="Flexbox-Align-Self-Class">
 ...
 </div>
 ...
</div>

Example 1: This example demonstrates the use of Primer CSS Flexbox Align Self using flex-self-start, flex-self-end, and flex-self-center classes.

Output:

👁 Image

Example 2: This example demonstrates the use of Primer CSS Flexbox Align Self using flex-self-baseline, flex-self-stretch, and flex-self-auto classes.

Output:

👁 Image

Reference: https://primer.style/product/css-utilities/#align-self