Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Evenly spacing Flexbox items in a column direction</title> <style> .container { display: flex; justify-content: space-between; background: yellow; } .item { margin-right: 20px; /* Initial margin-right */ border: 1px solid red; } .item:last-child { margin-right: 0; /* Remove margin-right on last item */ } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> </body> </html>