Layout equal number of flex children per line when they wrap - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Wrap

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

Description

Layout equal number of flex children per line when they wrap

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">

.container {<!--   w w  w.  j  a v  a  2s  .c o  m-->
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.box {
   flex: 1 0 75px;
   height: 50px;
   margin: 5px;
   background-color: lightgreen;
}
@media screen and (max-width: 900px) {
   .box { flex: 1 0 calc(33% - 10px); } 
}
@media screen and (max-width: 600px) {
   .box { flex: 1 0 calc(50% - 10px); }
}
@media screen and (max-width: 300px) {
   .box { flex: 1 0 calc(100% - 10px); }
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="box"></div> 
   <div class="box"></div> 
   <div class="box"></div> 
   <div class="box"></div> 
   <div class="box"></div> 
   <div class="box"></div> 
  </div>  
 </body>
</html>

Related Tutorials