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 to align items on the cross axis. The cross axis always runs perpendicular to the main axis. These classes are used to define the position of flex items according to the cross axis.
Primer CSS Flexbox Align Items Classes:
- flex-items-start: This class is used to align flex items to the start of the cross axis.
- flex-items-end: This class is used to align flex items to the end of the cross axis
- flex-items-center: This class is used to align flex items to the center of the cross axis
- flex-items-baseline: This class is used to align flex items along their baseline.
- flex-items-stretch: This class is used to stretch flex items from the start of the cross-axis to the end of the cross axis.
Syntax: In this syntax, we will use only one class, other classes can be used as well as a replacement.
<div class="border d-flex flex-items-start">
...
</div>Example 1: This example demonstrates the use of Primer CSS Flexbox Align Items.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Flexbox Align 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 Align Items
</h4>
<strong>Flexbox flex-items-start Class:</strong>
<br>
<div class="border d-flex m-2 flex-items-start" style="min-height: 150px;">
<div class="p-5 border 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-items-end Class:</strong>
<br>
<div class="border d-flex m-2 flex-items-end" style="min-height: 150px;">
<div class="p-5 border 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-items-center Class:</strong>
<br>
<div class="border d-flex m-2 flex-items-center" style="min-height: 150px;">
<div class="p-5 border 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 Items
Example 2: This is another example that demonstrates the use of Primer CSS Flexbox Align Items.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Flexbox Align 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 Align Items
</h4>
<strong>Flexbox flex-items-baseline Class:</strong>
<br>
<div class="border d-flex m-2 flex-items-baseline" style="min-height: 150px;">
<div class="p-5 border 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-items-stretch Class:</strong>
<br>
<div class="border d-flex m-2 flex-items-stretch" style="min-height: 150px;">
<div class="p-5 border 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 Items
Reference: https://primer.style/css/utilities/flexbox#align-items