Primer CSS Flexbox Justify Content
Last Updated :
24 May, 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 Justify Content classes are used to distribute space between and around flex items along the main axis of the container. There are a few classes that can be used to set the alignment of flex items which are mentioned and described below.
Primer CSS Flexbox Justify Content Classes:
- flex-justify-start: This class is used to align flex items to the start line.
- flex-justify-end: This class is used to align flex items to the end line.
- flex-justify-center: This class is used to align flex items in the middle of the container.
- flex-justify-between: This class is used to distribute flex items evenly in the container
- flex-justify-around: This class is used to distribute flex items evenly, with an equal amount of space around them.
Syntax:
<div class="border d-flex flex-justify-start">
...
</div>Example 1: Below is examples illustrating the Primer CSS Flexbox Justify Content using the flex-justify-start class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="o-container" style="padding:1em;">
<h1 class="color-fg-success text-center">
GeeksforGeeks
</h1>
<h4 class="text-center font-bold">
Primer CSS Flex Direction
</h4>
<strong>Flexbox Container flex-justify-start Class:</strong>
<br>
<div class="border d-flex flex-justify-start">
<div class="p-5 border color-bg-subtle">box 1</div>
<div class="p-5 border color-bg-subtle">box 2</div>
<div class="p-5 border color-bg-subtle">box 3</div>
</div>
</div>
</body>
</html>
Output:
Example 2: Below is examples illustrating the Primer CSS Flexbox Justify Content using the flex-justify-end class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="o-container" style="padding:1em;">
<h1 class="color-fg-success text-center">
GeeksforGeeks
</h1>
<h4 class="text-center font-bold">
Primer CSS Flex Direction
</h4>
<strong>Flexbox Container flex-justify-end Class:</strong>
<br>
<div class="border d-flex flex-justify-end">
<div class="p-5 border color-bg-subtle">box 1</div>
<div class="p-5 border color-bg-subtle">box 2</div>
<div class="p-5 border color-bg-subtle">box 3</div>
</div>
</div>
</body>
</html>
Output:
Example 3: Below is examples illustrating the Primer CSS Flexbox Justify Content using the flex-justify-center class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="o-container" style="padding:1em;">
<h1 class="color-fg-success text-center">
GeeksforGeeks
</h1>
<h4 class="text-center font-bold">
Primer CSS Flex Direction
</h4>
<strong>Flexbox Container flex-justify-center Class:</strong>
<br>
<div class="border d-flex flex-justify-center">
<div class="p-5 border color-bg-subtle">box 1</div>
<div class="p-5 border color-bg-subtle">box 2</div>
<div class="p-5 border color-bg-subtle">box 3</div>
</div>
</div>
</body>
</html>
Output:
Example 4: Below is examples illustrating the Primer CSS Flexbox Justify Content using the flex-justify-between class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="o-container" style="padding:1em;">
<h1 class="color-fg-success text-center">
GeeksforGeeks
</h1>
<h4 class="text-center font-bold">
Primer CSS Flex Direction
</h4>
<strong>Flexbox Container flex-justify-between Class:</strong>
<br>
<div class="border d-flex flex-justify-between">
<div class="p-5 border color-bg-subtle">box 1</div>
<div class="p-5 border color-bg-subtle">box 2</div>
<div class="p-5 border color-bg-subtle">box 3</div>
</div>
</div>
</body>
</html>
Output:
Example 5: Below is examples illustrating the Primer CSS Flexbox Justify Content using the flex-justify-around class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="o-container" style="padding:1em;">
<h1 class="color-fg-success text-center">
GeeksforGeeks
</h1>
<h4 class="text-center font-bold">
Primer CSS Flex Direction
</h4>
<strong>Flexbox Container flex-justify-around Class:</strong>
<br>
<div class="border d-flex flex-justify-around">
<div class="p-5 border color-bg-subtle">box 1</div>
<div class="p-5 border color-bg-subtle">box 2</div>
<div class="p-5 border color-bg-subtle">box 3</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://primer.style/css/utilities/flexbox#justify-content
Similar Reads
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
CSS justify-content Property
The justify-content property in CSS is used to align the flexible box container's items along the main axis of a flex container. This property manages space distribution between and around content items in a flex container.Note: This property does not align items along the vertical axis. For vertica
6 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 Example Components
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
3 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 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 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
Tailwind CSS Justify Content
This class accepts two values in tailwind CSS. It is the alternative to the CSS justify-content property. This class is used to describe the alignment of the flexible box container. It contains the space between and around content items along the main axis of a flex container. It is basically used f
3 min read
How to Fix Justify-content Property Not Working in CSS Flexbox?
The CSS Flexbox is a powerful layout module that allows for the efficient alignment and distribution of the space among items in a container. One of its core properties justify-content is used to align flex items along the main axis. However, there are instances where the justify-content property mi
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