Center and Right-align on a row using Flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

Center and Right-align on a row using Flexbox

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Dan Kreiger</title> 
  <style>

.parent {<!-- w w  w. j  ava2 s  .co  m-->
   display: flex;
   background-color: yellow;
}
.parent div {
   display: flex;
   flex-basis: calc(100% / 3);
}
.c {
   justify-content: center;
   background-color: cyan;
}
.e {
   justify-content: flex-end;
   background-color: grey;
}
.bs {
   background-color: green;
   color: white;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="parent"> 
   <div class="a"></div> 
   <div class="c"> 
    <button class="bs">OK</button> 
    <button class="bs">Cancel</button> 
   </div> 
   <div class="e"> 
    <button class="bs">Help</button> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials