Dynamic width flexboxes that wrap and keep column structure - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

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

Description

Dynamic width flexboxes that wrap and keep column structure

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Flex Example</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.container {<!--from  w ww . j ava 2 s .co m-->
   padding:21px;
   background:white;
   display:flex;
   flex-wrap:wrap;
}

.container>div {
   border:2px solid Chartreuse;
   background:yellow;
   margin:6px;
   width:calc(100% / 5);
   padding:11px;
   flex-direction:column;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div>
     Div 1 
   </div> 
   <div>
     Div 2 
   </div> 
   <div>
     Div 3 
   </div> 
   <div>
     Div 4 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials