Create Flexbox layout with horizontal groups, align last div to right - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

Create Flexbox layout with horizontal groups, align last div to right

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">
header<!--   ww w .  j a  v a  2 s  . com-->
 {
   display:flex;
}

header>div
 {
   margin-right:auto;
}

header>span
 {
   margin-left:auto;
}
</style> 
 </head> 
 <body> 
  <header> 
   <div>
     1 
   </div> 
   <div>
     2 
   </div> 
   <div>
     3 
   </div> 
   <span>Right</span> 
  </header>  
 </body>
</html>

Related Tutorials