Scribd Logo
Upload

Welcome to Scribd!

  • Flex Box

    Uploaded by

    Coding Corner
    19 views4 pages

    Original Title

    FlexBox.docx

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    19 views4 pages

    Flex Box

    Uploaded by

    Coding Corner

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Code

    <!DOCTYPE html>
    <html>
    <head>
    <title>Sign In Form in Html</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/
    css/bootstrap.min.css">
    <style type="text/css">
    .container {
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    /* align-items: flex-start; */
    flex-wrap: wrap;
    justify-content: space-between;
    }
    .container div{
    border: 1px solid #ccc;
    padding: 10px;
    }
    .header {
    width: 100%;
    /* align-self: flex-start; */
    }
    .box-1 {
    width: 200px;
    /* order: 2; */
    }
    .box-2 {
    width: 200px;
    /* flex: 2; */
    /* order: 1; */
    /* align-self: center; */
    }
    .box-3 {
    width: 200px;
    /* flex: 2; */
    /* order: 3; */
    }
    .box-4 {
    width: 200px;
    /* flex: 2; */
    /* order: 3; */
    }
    .box-5 {
    width: 200px;
    /* flex: 2; */
    /* order: 3; */
    }

    .box-7 {
    width: 50%;
    /* flex: 2; */
    /* order: 3; */
    }

    .box-8 {
    width: 50%;
    /* flex: 2; */
    /* order: 3; */
    }
    @media screen and (max-width: 1200px) {
    .box-7, .box-8 {
    width: 100%;
    }
    }

    @media screen and (max-width: 500px) {


    .box-1, .box-2,.box-3,.box-4,.box-5 {
    width: 100%;
    }
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="header">
    <h1>Website</h1>
    <p>with responsive layout</p>
    </div>
    <div class="box-1">
    <h1>Box One</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
    iusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <div class="box-2">
    <h1>Box Two</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
    iusmod
    tempor incididunt ut labore et dolore magna aliqua</p>
    </div>

    <div class="box-3">
    <h1>Box Three</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
    iusmod
    tempor incididunt ut labore et dolore magna aliqua</p>
    </div>

    <div class="box-4">
    <h1>Box Four</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
    iusmod
    tempor incididunt ut labore et dolore magna aliqua</p>
    </div>

    <div class="box-5">
    <h1>Box Five</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
    iusmod
    tempor incididunt ut labore et dolore magna aliqua</p>
    </div>

    <div class="box-7">
    <h1>Some Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
    iusmod
    tempor incididunt ut labore et dolore magna aliqua</p>
    </div>

    <div class="box-8">
    <h1>Some Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
    iusmod
    tempor incididunt ut labore et dolore magna aliqua</p>
    </div>
    </div>
    </body>
    </html>
    OUTPUT

    You might also like