******FLEX BOX*******



 HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="flex.css">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex Box</title>
  </head>
  <body>
    <div id="container">
      <div id="violet">violet</div>
      <div id="indigo">indigo</div>
      <div id="blue">Blue</div>
      <div id="green">Green</div>
      <div id="yellow">Yellow</div>
      <div id="orange">Orange</div>
      <div id="red">Red</div>
    </div>
  </body>
</html>

CSS

#container{
    height: 300px;
    width:700px;
    border: 2px solid black;
    margin: 3px;
    display: flex;
    flex-direction: column;
}
#violet{
    height: 100px;
    width: 300px;
    background-color: violet;
}
#indigo{
    color: white;
    height: 100px;
    width: 300px;
    background-color: indigo;
}
#blue{
    color: wheat;
    height: 100px;
    width: 300px;
    background-color: blue;
}
#green{
    height: 100px;
    width: 300px;
    background-color: green;
}
#yellow{
    height: 100px;
    width: 300px;
    background-color: yellow;
}
#orange{
    height: 100px;
    width: 300px;
    background-color: orange;
}
#red{
    height: 100px;
    width: 300px;
    background-color: red;
}

***********BEFORE Flex****************

****AFTER********


******FLEX DIRECTION*******




Comments

Popular posts from this blog

Assignment

OverFlow

FRONT-END PROJECT SPOTIFY CLONE