Flex box in css

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Flex box in css</title>
    <style>
        .continer {
            width: 100%;
            height: 544px;
            border: 2px solid gray;
            display: flex;
            /* Initialize the container as a flex box */


            /* flex popertiy for flex container */
            /* ( by deafult flex direction is row) */
            /* flex-direction: row; */
            /* flex-direction: column; */
            /* flex-direction: row-reverse; */

            /* flex-wrap: wrap; */
            /* (Default value of flex-wrap is no-wrap) */


            /* flex-flow: wrap row-reverse; */

            /* justify-content will justify the content in horizontal direction */

            /* justify-content: space-evenly; */
            /* justify-content: space-between; */
            /* justify-content: center; */
            /* justify-content: space-around; */


            /* align-item will justify the content in vertical direction */

            /* align-items: center; */
            /* align-items: flex-end; */
            /* align-items: flex-start; */
            /* align-items: stretch;  */



        }

        .item {
            width: 150px;
            height: 150px;
            background-color: cyan;
            border: 2px solid tomato;
            margin: 2px;
            padding: 10px;

        }

        /* Flex properties for a flex item */
        #box1 {
            /* jis item ka jitna bada order number hoga wo utna hi bad me list me show hoga */
            /* order: 2;    */
            /* flex-grow jina bada number hoga wo utana hi jada bada hoga diplay size ke onusar;  aur is me - number ivalid hota he */
            /* flex-grow: 2; */
            /* flex-shrink: 2; */


            /* align-self flex-end se ek particular item ko end me le ga sakte he  */

            align-self: flex-end;

        }

        #box2 {
            /* flex-grow: 23; */
             /* flex-shrink jina bada number hoga wo utana hi jada shota hoga diplay size ke onusar;  aur is me - number ivalid hota he */
            /* flex-shrink: 12; */
            align-self: center;
            /* align-self center se ek particular item ko center kar sakte he; */

            /* flex-basis: 400px; */
             /* when flex-direction is set to row flex-basis: will control width */
            /* when flex-direction is set to column flex-basis: will control height */
        }

        #box3 {
            /* order: 10; */
            /* flex: grow , shrink flex basis; */
            /* flex: 3 5 500px; */

            /* by deafult align-self is flex-start; */
            align-self: flex-start;
              }
    </style>
</head>

<body>
    <h2>Flex box in css</h2>
    <div class="continer">
        <div class="item" id="box1">Friest item</div>
        <div class="item" id="box2">second item</div>
        <div class="item" id="box3">third item</div>
        <!-- <div class="item" id="box4">fifth item</div>
        <div class="item" id="box5">sixth item</div>
        <div class="item" id="box6">sixth item</div> -->
    </div>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

grid-template-areas

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .container {             display: grid;             /* call grid area with asign grid area name  */             grid-template-areas:                 ' navbar navbar navbar'                 'section section aside'                 'footer footer footer';         }         nav ul {             display: flex;             justify-content: center;             al...
Read more

Loop In javaScript

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Loop In javaScript</title> </head> <body>     <h1>javaScript Loop</h1>     <p id="demo"></p>     <p id="demo1"></p>     <h1>hello </h1>     <script>         // for loop         // let i=0;         // for(i=0; i<10; i++){         //     console.log(i)         // }         // let friends = ["Avengers", "Lost in Space", "Strangers", "Dark", "Chilling Adventure of Sabrina", "Martian", "intastrastailer"]         // for (let index1 = 0; index1 < friends.length; index1++) {        ...
Read more

css grid 2

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>css grid</title>     <style>         .container {             display: grid;             grid-template-columns: repeat(3, 4fr);             /* grid-template-rows: repeat(8, 1fr); */             grid-template-rows: 2fr 4fr 2fr;             /* grid-column-gap: 1rem ;             grid-row-gap: 2rem; */             grid-gap: 1rem;                   }         .box {             background-color: rgb(236, 214, 15);       ...
Read more