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 an element layout it’s content using the flexbox model. Each direct child of the flex container will become a flex item.
• Flex direction: flex-direction is used to set the direction of the flex items in the flexbox. 
• Flex wrap: Flex wrap is used to place flex items into a single line or wrapped onto multiple lines.
• Justify content: Justify Content classes are used to distribute space between and around flex items along the main axis of the container.
• Align items: This is used to align the flex box item.
• Align content: Align Content is used to create multiple main axis lines and adds extra space on the cross axis.
• Flex:  Flex classes are used to define the ability of a flex item to alter its dimensions to fill available space.
• Align self: Align Self classes are used to adjust the alignment of an individual flex item on the cross axis.
• Order:  Order classes are used to define the order of the flex items like we can sort them according to our needs.
• Responsive flex utilities: Responsive Flex utilities provide a flexible and responsive one-dimensional layout model that has efficient layouts with distributed spaces among items within a container.
• Example components:  Example Components is used to create the various components in Primer CSS using the flexbox classes.

Example 1: The following code demonstrates the flex-row class which shifts the direction of the axis from left to right.

Output:

 

Example 2: The following code demonstrates the flex-row-reverse class which shifts the direction of the axis from right to left.

Output:

 

Example 3: The following code demonstrates the flex-column class which shifts the direction of the axis from top to bottom.

Output:

 

Example 4: The following code demonstrates the flex-column-reverse class which shifts the direction of the axis from bottom to top.

Output:

 

Example 5: The following example demonstrates the flex-wrap class which wraps the line in multiple lines. 

Output:

 

Example 6: The following code demonstrates the flex-nowrap class.

Output:

 

Example 7: The following code demonstrates the flex-wrap-reverse class.

Output:

 

Example 8: The following code demonstrates the d-flex class which makes the element behave like a block.

Output:

 

Example 9: The following code demonstrates the d-inline-flex class which makes the element behave in an inline fashion.

Output:

 

Reference: https://primer.style/css/utilities/flexbox

nitinpatelco20b540

Follow

Improve

Article Tags :

• CSS
• Web Technologies
• Primer-CSS
• Primer-CSS Utilities