Commit a49fd14c authored by Thangaraj G's avatar Thangaraj G
Browse files

flex-box

parent 1725944f

flexbox.html

0 → 100644
+116 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      .main {

        background-color: red;

        /* width: 300px; */

        display: flex;

        flex-wrap: wrap;

        flex-direction: row;

      }

      .box {

        box-sizing: border-box;

        background-color: green;

        width: 200px;

        /* height: 100px; */

        border: 2px solid black;

        margin: 10px;

      }

      .sub {

        display: flex;

        flex-basis: 200px;

        flex-grow: 1;

      }

      .sub-sec {

        flex-basis: 400px;

        background-color: wheat;

        width: 50px;

        height: 20px;

        flex-grow: 1;

        flex-shrink: 20;

        /* flex: 1 30 400px; */

      }

      .sub-1 {

        flex-basis: 400px;

        background-color: blueviolet;

        width: 50px;

        height: 20px;

        flex-grow: 1;

        flex-shrink: 20;

        /* flex: 1 20 400px; */

      }

      .container {

        display: flex;

        background-color: violet;

        padding: 5px;

        /* width: 1000px; */

        height: 200px;

        flex-wrap: wrap;

        /* align-content: flex-end; */

      }

      .boxes:nth-child(1) {

        width: 50px;

        background-color: red;

        align-self: center;

        margin: 5px;

        order: 2;

      }

      .boxes:nth-child(2) {

        width: 50px;

        background-color: red;

        margin: 5px;

        order: 3;

        align-self: flex-start;

      }

      .boxes:nth-child(3) {

        width: 50px;

        background-color: red;

        margin: 5px;

        align-self: baseline;

      }

      .boxes:nth-child(4) {

        width: 50px;

        background-color: red;

        margin: 5px;

        align-self: flex-end;

      }

    </style>

  </head>

  <body>

    <div class="main">

      <div class="box">

        box-1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto

        tempore magni veniam voluptate commodi illum libero in doloribus

        similique tenetur ad corporis, praesentium inventore dolor excepturi

        maiores saepe facere eveniet?

      </div>

      <div class="box">box-2</div>

      <div class="box">box-3</div>

      <div class="box">box-4</div>

      <div class="box">box-5</div>

      <div class="box">box-6</div>

      <div class="box">box-7</div>

      <div class="box">

        box-8 box-1 Lorem ipsum dolor sit amet consectetur adipisicing elit.

        Iusto tempore magni veniam voluptate commodi illum libero in doloribus

        similique tenetur ad corporis, praesentium inventore dolor excepturi

        maiores saepe facere eveniet?

      </div>

    </div>

    <div class="sub">

      <div class="sub-sec">box-1</div>

      <div class="sub-1">box-2</div>

    </div>

    <div class="container">

      <div class="boxes">box-1</div>

      <div class="boxes">box-2</div>

      <div class="boxes">box-3</div>

      <div class="boxes">box-4</div>

    </div>

  </body>

</html>