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.
<!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.
<!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.
<!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.
<!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.
<!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