Primer CSS Flexbox Align Content
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 Content is used to create multiple main axis lines and adds extra space in the cross axis. Also, these classes are used to align the lines of the main axis on the cross axis.
Primer CSS Flexbox Align content Classes:
- flex-content-start: This class is used to align specific content items to the start of the cross axis.
- flex-content-end: This class is used to align specific content items to the end of the cross axis.
- flex-content-center: This class is used to align specific content items to the center of the cross axis.
- flex-content-between: This class is used to distribute the content evenly.
- flex-content-around: This class is used to align specific content items around a cross axis.
- flex-content-stretch: This class is used to stretch specific content items from the start of the cross-axis to the end of the cross axis.
Syntax:
<div class="border d-flex
Flexbox-Align-content-Class">
...
</div>
Example 1: This example demonstrates the Primer CSS Flexbox Align Content.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Flexbox Align Content </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 Content
</h4> <br>
<strong> Flexbox flex-content-start Class </strong>
<div style="min-height: 120px;"
class="border d-flex m-2 flex-wrap
flex-content-start">
<div class="p-5 border color-bg-accent-emphasis">
First Item
</div>
<div class="p-5 border color-bg-success-emphasis">
Second Item
</div>
<div class="p-5 border color-bg-danger-emphasis">
Third Item
</div>
<div class="p-5 border color-bg-accent">
Fourth Item
</div>
<div class="p-5 border color-bg-success">
Fifth Item
</div>
<div class="p-5 border color-bg-danger">
Sixth Item
</div>
</div> <br>
<strong> Flexbox flex-content-center Class </strong>
<div style="min-height: 120px;"
class="border d-flex m-2 flex-wrap
flex-content-center">
<div class="p-5 border color-bg-accent-emphasis">
First Item
</div>
<div class="p-5 border color-bg-success-emphasis">
Second Item
</div>
<div class="p-5 border color-bg-danger-emphasis">
Third Item
</div>
<div class="p-5 border color-bg-accent">
Fourth Item
</div>
<div class="p-5 border color-bg-success">
Fifth Item
</div>
<div class="p-5 border color-bg-danger">
Sixth Item
</div>
</div> <br>
<strong> Flexbox flex-content-end Class </strong>
<div style="min-height: 120px;"
class="border d-flex m-2 flex-wrap
flex-content-end">
<div class="p-5 border color-bg-accent-emphasis">
First Item
</div>
<div class="p-5 border color-bg-success-emphasis">
Second Item
</div>
<div class="p-5 border color-bg-danger-emphasis">
Third Item
</div>
<div class="p-5 border color-bg-accent">
Fourth Item
</div>
<div class="p-5 border color-bg-success">
Fifth Item
</div>
<div class="p-5 border color-bg-danger">
Sixth Item
</div>
</div>
</body>
</html>
Output:
Primer CSS Flexbox Align Content
Example 2: This example demonstrates the Primer CSS Flexbox Align Content.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Flexbox Align Content </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 Content
</h4> <br>
<strong> Flexbox flex-content-between Class </strong>
<div style="min-height: 120px;"
class="border d-flex m-2 flex-wrap
flex-content-between">
<div class="p-5 border color-bg-accent-emphasis">
First Item
</div>
<div class="p-5 border color-bg-success-emphasis">
Second Item
</div>
<div class="p-5 border color-bg-danger-emphasis">
Third Item
</div>
<div class="p-5 border color-bg-accent">
Fourth Item
</div>
<div class="p-5 border color-bg-success">
Fifth Item
</div>
<div class="p-5 border color-bg-danger">
Sixth Item
</div>
</div> <br>
<strong> Flexbox flex-content-around Class </strong>
<div style="min-height: 120px;"
class="border d-flex m-2 flex-wrap
flex-content-around">
<div class="p-5 border color-bg-accent-emphasis">
First Item
</div>
<div class="p-5 border color-bg-success-emphasis">
Second Item
</div>
<div class="p-5 border color-bg-danger-emphasis">
Third Item
</div>
<div class="p-5 border color-bg-accent">
Fourth Item
</div>
<div class="p-5 border color-bg-success">
Fifth Item
</div>
<div class="p-5 border color-bg-danger">
Sixth Item
</div>
</div> <br>
<strong> Flexbox flex-content-stretch Class </strong>
<div style="min-height: 120px;"
class="border d-flex m-2 flex-wrap
flex-content-stretch">
<div class="p-5 border color-bg-accent-emphasis">
First Item
</div>
<div class="p-5 border color-bg-success-emphasis">
Second Item
</div>
<div class="p-5 border color-bg-danger-emphasis">
Third Item
</div>
<div class="p-5 border color-bg-accent">
Fourth Item
</div>
<div class="p-5 border color-bg-success">
Fifth Item
</div>
<div class="p-5 border color-bg-danger">
Sixth Item
</div>
</div>
</body>
</html>
Output:
Primer CSS Flexbox Align Content
Reference: https://primer.style/css/utilities/flexbox#align-content
Similar Reads
Primer CSS Flexbox Justify 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 Justify Content cl
3 min read
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
3 min read
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
CSS align-content property The align-content property changes the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container. This property defines how each flex line is aligned within a flexbox and is only applicable if flex-wrap: wrap is applie
4 min read
Primer CSS Layout Alignment 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. Its approach to CSS is influenced by
2 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