Using flex layout with one item on the right, the other centered on the left section - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

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

Description

Using flex layout with one item on the right, the other centered on the left section

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>S.O. 44183969</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
.container {<!-- w w w. j  av a 2  s  .c  o m-->
   display:flex;
   justify-content:space-between;
}

.left-container {
   background-color:Chartreuse;
   display:flex;
   align-items:center;
   height:201px;
   width:51%;
}

.right-container {
   background-color:yellow;
   display:flex;
   align-items:center;
   justify-content:center;
   height:201px;
   width:51%;
}

.item {
   background-color:blue;
   height:100px;
   width:100px;
}
</style> 
 </head> 
 <body translate="no"> 
  <main class="container"> 
   <section class="left-container"> 
    <div class="item"></div> 
   </section> 
   <section class="right-container"> 
    <div class="item"></div> 
   </section> 
  </main>  
 </body>
</html>

Related Tutorials