CSS Flexbox Layout

Full Stack Web Development Courses with Real-time projects Start Now!!

Program 1

<html>
    <head>
        <style>
           .flex-container{
            display:flex;
            /*flex-direction:row-reverse;*/
            justify-content:flex-end;
            
           }
           .flex-container>div{
            background-color: blue;
            padding:20px;
            font-size:30px;
           }
        </style>
    </head>
    <body>
       <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
       </div>
    </body>
</html>

 

Did you know we work 24x7 to provide you best tutorials
Please encourage us - write a review on Google

courses
Image

DataFlair Team

DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.

Leave a Reply

Your email address will not be published. Required fields are marked *