Center and right align flexbox elements - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

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

Description

Center and right align flexbox elements

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flexbox Center Right justify</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
@import url("//fonts.googleapis.com/css?family=Roboto+Slab:300,400,700");
*, *:before, *:after {<!--   w  w w  . j av a  2 s  .  c  o m-->
   box-sizing:inherit;
}

html, body {
   box-sizing:border-box;
   height:100vh;
}

body {
   display:flex;
   justify-content:center;
   align-items:center;
   color:Chartreuse;
   background:yellow;
}

.topbar {
   background:blue;
   width:501px;
   height:6rem;
   display:flex;
   align-items:center;
   justify-content:flex-end;
}

.center {
   background:green;
   flex:2;
}

.right {
   background:blue;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="topbar"> 
   <div class="center">
     Center 
   </div> 
   <div class="right">
     Right 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials