Preview:
<!DOCTYPE html>
<html>
<head>
    <title>Flex Item</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;
            background-color: cornflowerblue;
            height: 100vh;
            width: 100%;
            position: fixed;
        }

        .item{
            color: black;
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
            background-color: lavender;
            text-align: center;
            padding-top: 50px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">This is my first Flex</h1>
    <div class="container">
        <div class ="item">
            <p>Name: S</p>
            <p>Roll No: 22B81A05</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.7</p>
        </div>
        <div class ="item">
            <p>Name: S</p>
            <p>Roll No: 22B81A05</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.0</p>
        </div>
        <div class ="item">
            <p>Name: S</p>
            <p>Roll No: 22B81A05</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.5</p>
        </div>
    </div>
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter