<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS Test: A flex container with the 'justify-content' property set to 'flex-end'</title> <link href="http://www.microsoft.com/" rel="author" title="Microsoft"> <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-justify-content" rel="help"> <link href="reference/justify-content-001-ref.htm" rel="match"> <meta content="image" name="flags"> <meta content="This test checks that the flex container with 'justify-content: flex-end' packs flex items toward the end of the main axis of each line." name="assert"> <style type="text/css"> #flexbox { background: linear-gradient(to right, blue 0, blue 150px, red 150px, red 300px); display: flex; justify-content: flex-end; height: 100px; width: 300px; } div div { background-color: orange; width: 75px; } </style> </head> <body> <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> <div id="flexbox"> <div></div> <div></div> </div> </body></html>