Create tile layout using flex items - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Item

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Item

Description

Create tile layout using flex items

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.flex-container {<!--from   w  w  w .  jav a2 s  .c o  m-->
   padding: 0;
   margin: 0;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
}
.flex-item {
   background: tomato;
   padding: 5px;
   height: 150px;
   margin-top: 10px;
   margin-right: 5px;
   line-height: 150px;
   color: white;
   font-weight: bold;
   font-size: 3em;
   text-align: center;
   flex: 1 0 200px;
}
.hidden-flex-item {
   content: "";
   flex: 1 0 200px;
   padding: 5px;
   margin-top: 10px;
   margin-right: 5px;
   visibility: hidden;
}


      </style> 
 </head> 
 <body> 
  <ul class="flex-container"> 
   <li class="flex-item">1</li> 
   <li class="flex-item">2</li> 
   <li class="flex-item">3</li> 
   <li class="flex-item">4</li> 
   <li class="flex-item">5</li> 
   <li class="flex-item">6</li> 
   <li class="flex-item">7</li> 
   <li class="flex-item">8</li> 
   <li class="flex-item">9</li> 
   <li class="flex-item">10</li> 
   <li class="flex-item">11</li> 
   <li class="flex-item">12</li> 
   <li class="flex-item">13</li> 
   <li class="flex-item">14</li> 
   <li class="hidden-flex-item"></li> 
   <li class="hidden-flex-item"></li> 
   <li class="hidden-flex-item"></li> 
   <li class="hidden-flex-item"></li> 
  </ul>  
 </body>
</html>

Related Tutorials