<!DOCTYPE html> <title>flexbox | justify-content: flex-end</title> <link rel="author" href="http://opera.com" title="Opera Software"> <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> <link rel="match" href="flexbox_justifycontent-flex-end-ref.html"> <style> div { background: blue; margin: 1em 0; border: 1px solid black; height: 8em; width: 30em; display: flex; justify-content: flex-end; } span { background: white; margin: 1em; width: 5em; max-width: 6em; display: inline-block; flex: 1 0 0%; } span:nth-child(1) {background: yellow;} span:nth-child(2) {background: pink;} span:nth-child(3) {background: lightblue;} </style> <div> <span>one</span> <span>two</span> <span>three</span> </div>