Two columns Flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

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

Description

Two columns Flexbox

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

.Grid--gutters {<!--   w  ww . j a  va2  s .com-->
   margin-left: -1em;
}
.Grid {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   list-style: none;
   margin: 0;
   padding: 0;
}
*, *::before, *::after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.Grid--gutters>.Grid-cell {
   padding-left: 1em;
}
.Grid--flexCells>.Grid-cell {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
}
.Grid-cell {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   -moz-box-flex: 1;
   -ms-flex: 1;
   flex: 50% 0;
}
.Demo {
   width: 100%;
   padding: .8em 1em 0;
   margin-bottom: 1em;
   background: rgba(147,128,108,.1);
   border-radius: 3px;
}


      </style> 
 </head> 
 <body> 
  <div class="Grid Grid--gutters Grid--flexCells"> 
   <div class="Grid-cell"> 
    <div class="Demo">
      Full-height, even when my content doesn't fill the space. 
    </div> 
   </div> 
   <div class="Grid-cell"> 
    <div class="Demo">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. 
    </div> 
   </div> 
   <div class="Grid-cell"> 
    <div class="Demo">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque. 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials