Flex Property.html

/* Flex Property */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/CSS/style.css" />
    <style>
      /*
      justify-content er main value 3 ta
      flex-start, flex-end, center
      */
          
      /*
      justify-content: flex-start;
      dile element gula main axis'r starting,
      mane ekdom shuru te chole jabe
      */
          
      /*
      justify-content: flex-end;
      set korle element gula main axis'r ekdom end e chole jabe
      */
          
      /*
      justify-content: center;
      korle element gula ekdom container'r center e chole ashbe
      */
          
      /*
      justify-content: space-around;
      set korle each element'r majhe nirdishto poriman space create hoy
      and first and last element theke container'r border'r majheo ekta space create hoy
      */
          
      /*
      flex-wrap: nowrap;
      dile container'r bhitore thaka flex item gula
      tader nijeder choto boro kore felbe oi container e atanor jonno
      */
          
      /*
      flex-wrap: wrap;
      set korle flex item gula nijeder size choto boro korbe na,
      jemon ase temon e thakbe 
      */
          
      /*
      flex-wrap: wrap-reverse;
      is exactly like the row-reverse concept
      */
          
      /*
      align-items: baseline;
      set korle, eta oi container'r cross axis bora bor 
      basline ba ekdom oi container'r shuru jeta ke bola hoy
      sekhane giye set hbe
      */
          
      /*
      align-items: center;
      set korle flex item gula flex container'r 
      cross axis bora bor center e giye set hbe
      */
          
      /*
      align-items: end;
      set korle flex item gula flex container'r 
      cross axis bora bor ekdom end e giye set hbe
      */
          
      /*
      align-content:
      eta tokhon e kaj korbe jokhon kina,
      kono flex container'r bhitore thaka flex item gula
      1'r odhik orthat multiple line e thakbe tokhon e
          
      er jonne align-content kaj koraite hoile 
      flex-wrap: wrap;
      set korte hoy,
      keno na flex-wrap: wrap; set korlei ekmatro flex item gula tokhon multiple line e set hoy,
      jodi multiple line na e ashe tahole ki kore align contnent kaj korbe.
          
      align content'r arekta kaj hocche,
      muloto kono container wrap korle tar flex item gular majhe space create hoy,
      align content diye muloto ei space ta e cotnrol kora jay 
      */
          
      /*
      align-content: start; ba
      align-content: baseline;
      set korle flex item gula cross axis'r ekdom shuru te jeye set hbe
      */
          
      /*
      align-self 
      eta diye muloto ekta container'r indivitual kono flex item'r align set kora jay
      */
          
      /*
      flex-shrink 
      eta muloto kono ekta flex item koto tuk shrink korbe,
      ba choto hbe ta nirdesh kore
      container e dekha jay container choto korle flex item gula o choto hoye or moddhe fit hoy,
      kintu jodi kono ekta specific flex item'r shrink houa komaite ba baraite chai tokhon ei property used hoy
      */

      body {
        text-align: center;
      }
      div {
        border: 2px solid black;
        display: inline-block;
        height: 50px;
        width: 50px;
      }
      #container1 {
        height: 200px;
        width: 800px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        /*
        ekhane flex-direction row set kora,
        ty er main axis hocche x axis ba horizontal line ta,
        ty ekhane element gula main axis'r left e chole ashche ekbare,
        orthat axis'r shuru te chole ashche
        */
      }
      #container2 {
        height: 200px;
        width: 800px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        /*
        ekhane element gula main axis'r end e chole jabe,
        flex-direcction row houa te er end hocche ekdom right side e,
        tai content gula ekdom end e chole jabe
        */
      }
      #container3 {
        height: 200px;
        width: 800px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        /*
        justify-content: center; set kora te element gula ekdom container'r center e chole ashche
        */
      }
      #container4 {
        height: 200px;
        width: 800px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        /*
        ekhane ekta bishoy lokkho korte hbe ta holo,
        justify-content: space-around;
        set korle 
        each element'r majh'r distance'r ordhen hobe hocche 
        last ba first element theke container'r border'r distance
        */
      }
      #container5 {
        height: 400px;
        width: 800px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /*
        same concept as like the "row"
        */
      }
      #container6 {
        height: 400px;
        width: 800px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        /*
        same concept as like the "row"
        */
      }
      #container7 {
        height: 400px;
        width: 800px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /*
        same concept as like the "row"
        */
      }
      #container8 {
        height: 200px;
        width: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
      }
      #container9 {
        height: 200px;
        width: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      #container10 {
        height: 200px;
        width: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
      }
      #container11 {
        height: 400px;
        width: 800px;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        /*
        ekhane flex-direction: row;
        set koray er cross axis hocche vertical line ba
        y axis arki amra jeta ke boli
        so, ekhane flex items gula cross axis'r starting ba
        arki jeta ke baseline bola hocche sekhane giye set hocche 
        */
      }
      #container12 {
        height: 400px;
        width: 800px;
        display: flex;
        flex-direction: row;
        align-items: center;
        /*
        flex-direction: row;
        houa te cross axis hocche vertical line ta
        and flex item gula cross axis'r center e giye set hocche
        */
      }
      #container13 {
        height: 400px;
        width: 800px;
        display: flex;
        flex-direction: row;
        align-items: end;
        /*
        ekhane flex item gula cross axis'r
        ekdom end e jaya set hocche
        */
      }
      #container14 {
        height: 200px;
        width: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: start;
      }
      #container15 {
        height: 200px;
        width: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        /*
        ekhane flex item gula 
        flex container'r center e giye set hoise 
        */
      }
      #container16 {
        height: 200px;
        width: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: end;
        /*
        ekhane flex item gula flex container'r 
        cross axis'r end e giye set hoise
        */
      }
      #container17 {
        height: 400px;
        width: 800px;
        display: flex;
        flex-direction: row;
        align-items: end;
        /*
        ekhane ei container'r jonno every flex item ekdom end e ase cross axis'r
        but individually box6 er align change kore eke ekdom start e niye jawa jabe
        align-self diye 
        */
      }
      #container18 {
        height: 200px;
        width: 200px;
        display: flex;
        flex-direction: row;
        /*
        ekhane ekhn every box 40*54 akare ache,
        orthat shob gula box e same onupate shrink hoise,
        ekhn jodi ami chai box7 onno gula theke 2 gun akare shrink hbe,
        tahole flex-shrink property ta use korte hbe

        default value hishabe shob gula box'r flex-shrink: 1; thake
        ei karonei shob gula box ekoi onupate shrink kore.

        so flex-shrink 1 er beshi hoile shrink onno gula theke tulonamulok beshi hbe,
        and 1 er kom hoile shrink onno gula theke tulonamulok kom hbe
        */
      }
      #container19 {
        height: 400px;
        width: 800px;
        display: flex;
        flex-direction: row;
      }
      #container20 {
        height: 400px;
        width: 800px;
        display: flex;
        flex-direction: row;
      }
      #box1 {
        background-color: aqua;
      }
      #box2 {
        background-color: pink;
      }
      #box3 {
        background-color: rgb(255, 200, 0);
      }
      #box4 {
        background-color: rgb(238, 110, 110);
      }
      #box5 {
        background-color: rgb(226, 97, 226);
      }
      #box6 {
        align-self: flex-start;
      }
      #box7 {
        flex-shrink: 2;
        /*
        ekhn ekhane box7 er akar onno gula theke beshi shrink hoise
        */
      }
      #box8 {
        background-color: green;
        flex-grow: 1;
        /*
        ekhane box8 e flex-grow 1 dewa te
        box tar grow hoise,
        jodi ei box e flex-grow property use na kora hoito 
        tahole ei box8'r jayga jto tuk seta kora ase toto tuk e nito
        and container'r onekta ongsho khali pore thakto
        kintu ekhane flex-grow property apply koray er grow hoise
        */
      }
      #box9 {
        background-color: greenyellow;
        flex-grow: 1;
      }
      #box10 {
        background-color: rebeccapurple;
        flex-grow: 2;
        /*
        to ekhane ja hocche ta holo
        box9 joto tuk grow korbe tar exactly 2 gun grow hbe
        box10'r
        */
      }
    </style>
  </head>
  <body>
    <div id="container1">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container2">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container3">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container4">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container5">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container6">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container7">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container8">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container9">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container10">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container11">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container12">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container13">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container14">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container15">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container16">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box5">box5</div>
    </div>
    <br />
    <div id="container17">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box6">box6</div>
    </div>
    <br />
    <div id="container18">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box7">box7</div>
    </div>
    <br />
    <div id="container19">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box4">Box4</div>
      <div id="box8">box8</div>
    </div>
    <br />
    <div id="container20">
      <div id="box1">Box1</div>
      <div id="box2">Box2</div>
      <div id="box3">Box3</div>
      <div id="box9">box9</div>
      <div id="box10">box10</div>
    </div>
  </body>
</html>