Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Right-align Flex Item Using CSS</title> <style> .flex-container { display: flex; background: #eee; } .item { padding: 10px; } .ml-auto { margin-left: auto; } </style> </head> <body> <h2>Right-align Last Item</h2> <div class="flex-container"> <div class="item"><a href="#">Home</a></div> <div class="item"><a href="#">About</a></div> <div class="item"><a href="#">Services</a></div> <div class="item ml-auto"><a href="#">Login</a></div> </div> <hr> <h2>Right-align Last Two Item</h2> <div class="flex-container"> <div class="item"><a href="#">Home</a></div> <div class="item"><a href="#">About</a></div> <div class="item"><a href="#">Services</a></div> <div class="item ml-auto"><a href="#">Login</a></div> <div class="item"><a href="#">Sign Up</a></div> </div> </body> </html>
