In Flexbox using align one item to the end horizontally - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

In Flexbox using align one item to the end horizontally

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.container {<!--from   w  w  w  .  j  a  va2 s .  com-->
   border:3px solid;
   height:501px;
   display:flex;
   flex-direction:row;
}

.box {
   border:2px solid;
   height:201px;
   width:51px;
}

.a {
   background-color:Chartreuse;
}

.b {
   background-color:yellow;
}

.c {
   background-color:blue;
   margin-left:auto;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="box a"> 
   </div> 
   <div class="box b"> 
   </div> 
   <div class="box c"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials