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

Output:

👁 Image

Example 2: Below is examples illustrating the Primer CSS Flexbox Justify Content using the flex-justify-end class.

Output:

👁 Image

Example 3: Below is examples illustrating the Primer CSS Flexbox Justify Content using the flex-justify-center class.

Output:

👁 Image

Example 4: Below is examples illustrating the Primer CSS Flexbox Justify Content using the flex-justify-between class.

Output:

👁 Image

Example 5: Below is examples illustrating the Primer CSS Flexbox Justify Content using the flex-justify-around class.

Output:

👁 Image

Reference: https://primer.style/product/css-utilities/#justify-content