Align child div on both end of parent flex row - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

Align child div on both end of parent flex row

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>div flex example</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.parent {<!--from www.j  av a2 s  .  c  o m-->
   height: 50px;
   width: 100%;
   border: 1px solid red;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
.child-1,
.child-2,
.child-3 {
   margin: 2px 1px;
   padding: 2px;
   border: 1px solid blue;
   display:flex;
}
.sub-parent {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
      </style> 
 </head> 
 <body> 
  <div class="parent"> 
   <div class="sub-parent"> 
    <div class="child-1 child">
      child-1 
    </div> 
    <div class="child-2 child">
      child-2 
    </div> 
   </div> 
   <div class="sub-parent"> 
    <div class="child-3">
      child-3 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials