Primer CSS Flexbox Example Components

Last Updated : 06 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. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS Flexbox Example Components is used to create the various components in Primer CSS using the flexbox classes. We can create the media object using the flexbox classes.

Primer CSS Flexbox Example Components:

Media object: This flexbox component is used to create the basic media object with text and images.
Responsive media object: This flexbox component is used to create the media object that would be responsive. It will be vertically centered on big screens and stacked on small viewports.

Primer CSS Flexbox Example Components Classes:

d-flex: This class is used to create the flexbox container.

Syntax:

<div class="d-flex">
  <div class="border">
      ...
  </div>
   <p>
      ...
   </p>
</div>

Example 1: This example demonstrates the implementation of Primer CSS Flexbox example components using a media object with 1 image.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Primer CSS Flexbox Example Components </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head>

<body>
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Flexbox Example Components </h3> <br>

        <div class="border d-flex flex-items-center">
            <div class="d-flex flex-justify-center">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" />
            </div>

            <p class="pl-3">
                <strong> GeeksforGeeks: </strong> <br>
                A Computer Science portal for geeks.
                It contains well written, well thought
                and well explained computer science and
                programming articles.
            </p>

        </div>
    </div>
</body>

</html>

Output:

Example 2: This example demonstrates the implementation of Primer CSS Flexbox example components with Responsive media object.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Primer CSS Flexbox Example Components </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head>

<body>
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Flexbox Example Components </h3> <br>

        <h3> Responsive media object </h3>

        <div class="m-2 border d-flex flex-column 
            flex-sm-row flex-sm-items-center">
            <div class="p-2 d-flex flex-justify-center 
                flex-sm-justify-start">
                <img style="max-width:120px;max-height:120px;" src=      
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
            </div>

            <p class="pl-4 m-0">
                A Computer Science portal for geeks.
                It contains well written, well thought
                and well explained computer science and
                programming articles.
                A Computer Science portal for geeks.
            </p>


            <div class="d-flex flex-justify-center">
                <img style="max-width:80px; max-height:80px;" 
                     src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" />
            </div>
            
            <div class="ml-sm-3 d-flex flex-justify-center">
                <svg class="octicon color-bg-success-emphasis 
                     color-fg-danger" 
                     viewBox="0 0 14 16" 
                     width="18" height="20" >
                    <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 
                        7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 
                        011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z">
                    </path>
                </svg>
            </div>
        </div>
    </div>
</body>
</html>