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