CSS FLEX BOX

 HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>CSS LEVEL 4</title>
    <link rel="stylesheet" href="STLE.CSS">
</head>
<body>    
  <h1>FLEXBOX PLAYGROUND</h1>
  <div id="container"  >
    <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>
</body>

</html>


CSS



body{
    text-align: center;
}

div{
    height: 50px;
    width: 150px;
    display: inline-block;
    border: 2px solid black;
    background-color: gold;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#container{
    width: 600px;
    height: 600px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

#box1{
    background-color: aqua;
}

#box2{
    background-color: pink;
    height:200px ;
}

#box3{
    background-color: red;
    height: 75px;
}

#box4{
    background-color: green;
}

#box5{
    background-color:violet;
}



OUTPUT
(SOME ARE NOT COPYABLE)


box2
box3
box4

Comments

Post a Comment

Popular posts from this blog

Array in function Javascript

  const ranger = [ "Troy" , "Jake" , "Noah" ] const rangerd = [ "Tylor" , "Chase" , "Koda" ] // ranger.push(rangerd) // const allranger = ranger.concat(rangerd) // console.log(allranger); // console.log(Array.isArray("Debadatta")); // console.log(Array.from("Debadatta")); // console.log(Array.isArray({name:"Debadatta"}));// Intresting let score1 = 100 let score2 = 200 let score3 = 300 console . log ( Array . of ( score1 , score2 , score3 ));
Read more

Array in Javascript

  // Array let myarr = [ 0 , 1 , 2 , 3 , 4 , 5 ] console . log ( myarr . length ); // Array Methods myarr . push ( 6 , 7 ) console . log ( myarr ); // slice,splice const myn1 = myarr . slice ( 0 , 4 ) console . log ( myn1 );
Read more

AMAZON HOME PAGE CLONE PROJECT

Image
HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Amazon </ title >     < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity = "sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin = "anonymous" referrerpolicy = "no-referrer" />     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < header >         < div class = "navbar border" >             < div class = "nav-logo border" >                 < div class = "logo" ></ div >             ...
Read more