Using Flex box to create two column layout - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

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

Description

Using Flex box to create two column layout

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
body {<!-- w w w.  jav a2s.  c  o  m-->
   font:2rem / 2.517 'Open Sans', sans-serif;
   background-color:Chartreuse;
   color:yellow;
   margin:0;
}

.wrapper {
   display:flex;
   flex-direction:column;
   min-height:100vh;
}

.background {
   order:3;
   padding:2em;
   display:flex;
}

.content {
   flex:2;
   order:2;
   padding:4em;
   text-align:center;
   display:flex;
   flex-direction:column;
   justify-content:center;
}

@media screen and (min-width: 768px)  {
   .wrapper {
      flex-direction:row;
   }
   
   .background {
      order:2;
   }
   
   .content {
      order:3;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <div class="background"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
   </div> 
   <div class="content"> 
    <div class="content__podaci"> 
     <h1>What is Lorem Ipsum?</h1> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     <h2>Title</h2> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
     <h2>Something</h2> 
     <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials