Primer CSS Flexbox Align Self
Last Updated :
25 Apr, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Flexbox Align Self </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<h1 class="color-fg-success text-center">
GeeksforGeeks
</h1>
<h4 class="text-center font-bold">
Primer CSS Flexbox Align Self
</h4>
<strong>Flexbox flex-self-start Class:</strong>
<br>
<div class="border d-flex m-2 "
style="min-height: 150px;">
<div class="p-5 border flex-self-start
color-bg-accent-emphasis">
Flex item 1
</div>
<div class="p-5 border color-bg-success-emphasis">
Flex item 2
</div>
<div class="p-5 border color-bg-danger-emphasis">
Flex item 3
</div>
</div>
<strong>Flexbox flex-self-end Class:</strong>
<br>
<div class="border d-flex m-2 "
style="min-height: 150px;">
<div class="p-5 border flex-self-end
color-bg-accent-emphasis">
Flex item 1
</div>
<div class="p-5 border color-bg-success-emphasis">
Flex item 2
</div>
<div class="p-5 border color-bg-danger-emphasis">
Flex item 3
</div>
</div>
<strong>Flexbox flex-self-center Class:</strong>
<br>
<div class="border d-flex m-2 "
style="min-height: 150px;">
<div class="p-5 border flex-self-center
color-bg-accent-emphasis">
Flex item 1
</div>
<div class="p-5 border color-bg-success-emphasis">
Flex item 2
</div>
<div class="p-5 border color-bg-danger-emphasis">
Flex item 3
</div>
</div>
</body>
</html>
Output:
Primer CSS Flexbox Align Self
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Flexbox Self Items </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<h1 class="color-fg-success text-center">
GeeksforGeeks
</h1>
<h4 class="text-center font-bold">
Primer CSS Flexbox Self Items
</h4>
<strong>Flexbox flex-self-baseline Class:</strong>
<br>
<div style="min-height: 150px;"
class="border d-flex flex-items-end m-2">
<div class="p-5 border color-bg-accent-emphasis
flex-self-baseline">
Flex item 1
</div>
<div class="p-5 border color-bg-success-emphasis">
Flex item 2
</div>
<div class="p-5 border color-bg-danger-emphasis">
Flex item 3
</div>
</div>
<strong>Flexbox flex-self-stretch Class:</strong>
<br>
<div style="min-height: 150px;"
class="border d-flex flex-items-end m-2">
<div class="p-5 border color-bg-accent-emphasis
flex-self-stretch">
Flex item 1
</div>
<div class="p-5 border color-bg-success-emphasis">
Flex item 2
</div>
<div class="p-5 border color-bg-danger-emphasis">
Flex item 3
</div>
</div>
<strong>Flexbox flex-self-auto Class:</strong>
<br>
<div style="min-height: 150px;"
class="border d-flex flex-items-end m-2">
<div class="p-5 border color-bg-accent-emphasis
flex-self-auto">
Flex item 1
</div>
<div class="p-5 border color-bg-success-emphasis">
Flex item 2
</div>
<div class="p-5 border color-bg-danger-emphasis">
Flex item 3
</div>
</div>
</body>
</html>
Output:
Primer CSS Flexbox Align Self
Reference: https://primer.style/css/utilities/flexbox#align-self
Similar Reads
Primer CSS Flexbox Align Items 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 Items used t
3 min read
Primer CSS Flexbox Align Content 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 Content is u
4 min read
Primer CSS Flexbox Primer CSS is a free open-source CSS framework based on principles that set the foundation for basic design elements like spacing, typeface, and color. This rigorous approach ensures that our patterns are consistent and interoperable.Primer CSS Flexbox:Flex container: Flex Container is used to make
6 min read
Primer CSS Flexbox Bugs 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. Flexbox is the flexible box that will
3 min read
CSS align-self Property The align-self property in CSS is used to align the selected items in the flexible container in many different manners such as flex-end, center, flex-start, etc. Syntax:align-self: auto|normal|self-start|self-end|stretch|center |baseline, first baseline, last baseline|flex-start |flex-end|baseline|s
5 min read
Primer CSS Flexbox Flex Container 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 Flex Container is
2 min read
Primer CSS Flexbox Flex 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 Flex classes are u
3 min read
CSS Flexbox and Its Properties CSS Flexbox, or Flexible Box Layout, is the layout model designed to create flexible and responsive layout structures without using float or positioning. By applying display: flex to a parent container, it becomes a flex container, and its children become flex items. This allows control over the ite
3 min read
Primer CSS Flexbox Grids Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste
3 min read
Primer CSS Flexbox Order 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 Order classes are
3 min read