Primer CSS Flexbox Required Reading

Last Updated : 01 Sep, 2022

In this article, we will see the required reading. 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.

Flexbox is a flexible box that is used to create a responsive website. In the required reading, we will discuss the flexbox types and various ways to create a flexbox.

Earlier, the flexbox was one-dimensional that can only deal with the layout in one dimension at a time either as a row or as a column but later in the latest version of CSS i.e CSS3 we can use a two-dimensional model which controls columns and rows together.

The two axes of flexbox: In a two-dimensional flexbox need to think in terms of two axes, the main axis, and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it and it is referring back to these axes.

The main axis:

.flex-row: This is the main axis which means the elements are aligned in a row.
.flex-row-reverse: This is the main axis which means the elements are aligned in a row in reverse order.
.flex-column: This is the cross axis which means the elements are aligned in the column.
.flex-column-reverse: This is the cross axis which means the elements are aligned in the column in reverse order.

The cross axis: The cross axis is that axis which runs perpendicular to the main axis. So the above diagram will look like this.

Start and end line:

Earlier, when we write any document then the writing will start from left to right but in the latest CSS3 model there is a range of writing modes and that is the reason why we no longer assume that a line of text will start at the top left of a document and run towards the right-hand side, with new lines appearing one under the other.

English Writing Format:

Arabic Writing Format:

The flex container: It 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.

HTML

<!DOCTYPE html>
<html>

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

<body>
    <h1 class="color-fg-success text-center">
        GeeksforGeeks
    </h1>
    <h4 class="text-center font-bold">
        Primer CSS Flexbox
    </h4>

    <strong>Flexbox container</strong>
    <br>
    <div class="border d-flex flex-column flex-sm-row">
        <div class="p-5 border color-bg-subtle">
            Item 1
        </div>
        <div class="p-5 border color-bg-subtle">
            Item 2
        </div>
        <div class="p-5 border color-bg-subtle">
            Item 3
        </div>
        <div class="p-5 border color-bg-subtle">
            Item 4
        </div>
        <div class="p-5 border color-bg-subtle">
            Item 5
        </div>
    </div>

</body>

</html>

Output:

Changing flex-direction: It is used to set the direction of the flex items in the flexbox.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Primer CSS Flex Container</title>

    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>

<body>
    <h1 class="color-fg-success text-center">
        GeeksforGeeks
    </h1>

    <h4 class="text-center font-bold">
        Primer CSS Flex Direction
    </h4>
    <strong>Flexbox Container flex-row Class:</strong>
    <br>
    <div class="border d-flex flex-row m-2 ">
        <div class=
             "m-2 p-5 border color-border-success-emphasis">
            1
        </div>
        <div class=
             "m-2 p-5 border color-border-success-emphasis">
            2
        </div>
        <div class=
             "m-2 p-5 border color-border-success-emphasis">
            3
        </div>
    </div>
    <strong>Flexbox Container flex-row-reverse Class:</strong>
    <br>
    <div class="border d-flex flex-row-reverse m-2 ">
        <div class=
             "m-2 p-5 border color-border-success-emphasis">
            1
        </div>
        <div class=
             "m-2 p-5 border color-border-success-emphasis">
            2
        </div>
        <div class=
             "m-2 p-5 border color-border-success-emphasis">
            3
        </div>
    </div>
</body>

</html>

Output:

Multi-line flex containers with flex-wrap: It is used to place flex items into a single line or wrapped onto multiple lines.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Primer CSS Flex Container</title>

    <link rel="stylesheet" href=
  "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>

<body>
    <h1 class="color-fg-success text-center">
        GeeksforGeeks
    </h1>

    <h3 class="text-center font-bold">
        A computer science portal for geeks
    </h3><br>

    <div class="border d-flex flex-wrap">
        <div class="p-5 px-6 border">1</div>
        <div class="p-5 px-6 border">2</div>
        <div class="p-5 px-6 border">3</div>
        <div class="p-5 px-6 border">4</div>
        <div class="p-5 px-6 border">5</div>
        <div class="p-5 px-6 border">6</div>
        <div class="p-5 px-6 border">7</div>
        <div class="p-5 px-6 border">8</div>
        <div class="p-5 px-6 border">9</div>
    </div>


</body>

</html>

Output:

The flex-flow shorthand: This property is a sub-property of the flexible box layout module and also a shorthand property for flex-wrap and flex-direction.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>flex-flow property</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-flow: row nowrap;
        }
        
        #main div {
            width: 100px;
            height: 50px;
        }
        
        h1 {
            color: #009900;
            font-size: 42px;
            margin-left: 50px;
        }
        
        h3 {
            margin-top: -20px;
            margin-left: 50px;
        }
    </style>
</head>

<body>
    <center>
    <h1>GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <div id="main">
        <div style="border:2px solid green">1</div>
        <div style="border:2px solid green;">2</div>
        <div style="border:2px solid green;">3</div>
        <div style="border:2px solid green;">4</div>
        <div style="border:2px solid green;">5</div>
        <div style="border:2px solid green;">6</div>
    </div>
    </center>
</body>

</html>

Output:

Properties applied to flex items: We can use three properties to control flex items and the three properties are:

flex-grow: It allows an item to fill up the available free space.
flex-shrink: It allows an item to shrink if there is not enough free space available.
flex-basis: It defines the size of an item before space is distributed.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">

    <style>
        h1 {
            color: green;
        }

        #gfg {
            width: 450px;
            height: 100px;
            border: 1px solid green;
            display: flex;
        }

        #gfg div:nth-of-type(1) {
            flex-grow: 1;
        }

        #gfg div:nth-of-type(2) {
            flex-grow: 1;
        }

        #gfg div:nth-of-type(3) {
            flex-grow: 1;
        }

        #gfg div:nth-of-type(4) {
            flex-grow: 4;
        }

        #gfg div:nth-of-type(5) {
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
    </center>
    <div id="gfg">
        <div style="border:2px solid green">1</div>
        <div style="border:2px solid green;">2</div>
        <div style="border:2px solid green;">3</div>
        <div style="border:2px solid green;">4</div>
        <div style="border:2px solid green;">5</div>
    </div>

</body>

</html>

Output:

Alignment, justification, and division of interstitial space:

Align content: It is used to create multiple main axis lines and adds extra space on the cross-axis.
Justify content: Justify Content classes are used to distribute space between and around flex items along the main axis of the container.

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>
        <h3 class="text-center">
          A computer science portal for geeks
        </h3>
        <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"> 1</div>
            <div class="p-5 border color-bg-subtle"> 2</div>
            <div class="p-5 border color-bg-subtle"> 3</div>
        </div>
    </div>
</body>
</html>