Flex-Wrap example

In this example below you will see how to do a Flex-Wrap example with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jarredderraj, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jarredderraj ©
  • HTML
  • CSS
  • JavaScript
    <!--Don't forget your doctype declatation, and head tag with all the goods, silly!-->

<html>
<body>
  <div id="wrapper">
    
    <div class="flex-item-header"> <span>Header Content Here!</span></div>
      
    <div class="flex-item"> <span>Box 02 Content Here!</span></div>
      
    <div class="flex-item"> <span>Box 03 Content Here!</span></div>
      
    <div class="flex-item"> <span>Box 04 Content Here!</span></div>
      
    <div class="flex-item"> <span>Box 05 Content Here!</span></div>
      
    <div class="flex-item"> <span>Box 06 Content Here!</span></div>
      
    <div class="flex-item"> <span>Box 07 Content Here!</span></div>
      
    <div class="flex-item"> <span>Box 08 Content Here!</span></div>
      
    <div class="flex-item"> <span>Box 09 Content Here!</span></div>
    
    <div class="flex-item"> <span>Box 10 Content Here!</span></div>
        
  </div>
  
</body>
</html>

/*Downloaded from https://www.codeseek.co/jarredderraj/flex-wrap-example-bwkzyk */
    body{
background-color: white;
font-size: 100%;
padding: 0;
margin: 0;
}

span{
  color: white;
  font-family: monospace;
  
}

#wrapper{
  width: 90%;
  height: auto;
  margin: 0 auto;
  background-color: white;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: .25rem;

}

.flex-item-header{
  width: 96.75%;
  height: 12em;
  background-color: teal;
  padding: .5rem;
  margin: .5rem;
  
}
.flex-item{
  width: 30%;
  height: 12em;
  background-color: red;
  padding: .5rem;
  margin: .5rem;
}


@media (max-width: 1150px) {
  
   body{
    background-color: white;
  }
  
  #wrapper{
    width: 100%;
    padding: .5rem;
    margin: 0 auto;
    margin-left: -10px;
    background-color: none;
  }
  
  
.flex-item{
    width: 46.7%;
    margin-top: .5rem;
    margin-bottom: .5rem;
    margin-left: auto;
    margin-right: auto;
    
     }
 }


@media (max-width: 600px) {
  
  body{
    background-color: white;
  }
  
  #wrapper{
    display: block;
    width: 95%;
    margin: 0 auto;
  }
  
  
.flex-item, .flex-item-header{
    width: 90%;
    margin: .5rem 0 .5rem .85rem;

    }
  
}


/*Downloaded from https://www.codeseek.co/jarredderraj/flex-wrap-example-bwkzyk */
    

Comments