Stacking elements vertically first with dynamic number of columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

Stacking elements vertically first with dynamic number of columns

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

.main {<!--from ww  w. j  a va  2  s.co m-->
   border: 1px solid;
   display: flex;
   flex-flow: column wrap;
   height: 250px;
}
.sub {
   border: 1px solid;
   height: 100px;
   width: 100px;
}


      </style> 
 </head> 
 <body> 
  <div class="main"> 
   <div class="sub">
     1 
   </div> 
   <div class="sub">
     2 
   </div> 
   <div class="sub">
     3 
   </div> 
   <div class="sub">
     4 
   </div> 
   <div class="sub">
     5 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials