Scribd Logo
Upload

Welcome to Scribd!

  • css-part2

    Uploaded by

    asharma11046
    2 views6 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    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 PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    2 views6 pages

    css-part2

    Uploaded by

    asharma11046

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 6

    CSS Part 2[flexbox]

    In this pdf , we will talk about the flexbox in css , because it important to manage the item in your website.

    If you want to use flexbox in css then you need a display: flex; in the parent container[container is just like box, whick holds the
    set of items] .

    Now ,suppose we have two file index.html and style.css and file looks like that -:-

    index.html style.css
    <!DOCTYPE html>
    <html lang="en"> .container{
    <head>
    <meta charset="UTF-8"> height: 100vh;
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> display:flex;
    <meta name="viewport" content="width=device-width, }
    initial-scale=1.0">
    <title>css flexbox</title> .box{

    </head> width: 100px;


    <body> height: 100px;
    background-color: red;
    <div class="container"> color: white;
    margin: 5px ;
    <div class="box">box1</div> }
    <div class="box">box2</div>
    <div class="box">box3</div>
    <div class="box">box4</div>
    <div class="box">box5</div>
    </div>

    </body>
    </html>

    Output:
    Jus fy-content -:-
    In jus fy-content have different kind of parameters such as center ,flex-start ,flex-end ,space-between,space-around,space-
    evenly.

    But by the default jus fy-content:flex-start;

    Now when you add the some jus fy-content property then result will effect like this -:-

    style.css
    .container{

    height: 100vh;
    display:flex;
    justify-content:center;
    }

    .box{

    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    margin: 5px ;
    }

    Output :

    .container{
    In style.css file , if you will replace the line
    height: 100vh;
    jus fy-content:center; --> jus fy-content:space-between; display:flex;
    justify-content:space-between;
    }

    .box{

    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    margin: 5px ;
    }
    Output:

    In style.css file , if you will replace the line

    jus fy-content:space-between; --> jus fy-content:space-evenly;

    output:

    In style.css file , if you will replace the line

    jus fy-content:space-evenly; --> jus fy-content:space-around;

    output:
    In style.css file , if you will replace the line

    jus fy-content:space-around; --> jus fy-content:flex-end;

    output:

    align-items-:-
    In align-items have different kind of parameters such as center ,start,end .

    But by the default align-items:flex-start;

    Now when you add the some align-items property then result will effect like this -:-

    style.css
    .container{

    height: 100vh;
    display:flex;
    align-items:start;
    }

    .box{

    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    margin: 5px ;
    }

    Output:
    In style.css file , if you will replace the line

    align-items:center; --> align-items:end;

    Output:

    Flex-direc on-:-
    Flex-direc on decides to item , which direc on will be arranged , in column or in row .

    By the way we have four type of flex-direc on row , row-reverse, column , column-reverse .

    Now by default any flexbox’s flex-direc on is row .

    style.css
    .container{

    height: 100vh;
    display:flex;
    flex-direction:coloum;
    }

    .box{

    width: 100px;
    height: 100px;
    background-color: red;
    color: white;
    margin: 5px ;
    }
    Output:
    In style.css file , if you will replace the line

    flex-direc on:column; --> align-items:column-reverse;

    output:

    In style.css file , if you will replace the line

    flex-direc on:column-reverse; --> align-items:row-reverse;

    output:

    You might also like