<?xml version="1.0" encoding="UTF-8"?> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <!-- Testcase with a variety of 'display: flex' examples with margin-left and/or margin-right set to 'auto'. --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Test: Testing horizontal auto margins on flex items in a horizontal flex container</title> <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/> <link rel="match" href="flexbox-margin-auto-horiz-001-ref.xhtml"/> <style> div.flexbox { width: 200px; height: 20px; background: lightgray; display: flex; margin-bottom: 2px; } div.a { width: 20px; background: green; margin-left: auto; } div.b { width: 20px; background: pink; margin-left: auto; margin-right: auto; } div.c { width: 20px; background: purple; margin-right: auto; } </style> </head> <body> <!-- just one item --> <div class="flexbox"> <div class="a"/> </div> <div class="flexbox"> <div class="b"/> </div> <div class="flexbox"> <div class="c"/> </div> <!-- Two items --> <div class="flexbox"> <div class="a"/><div class="b"/> </div> <div class="flexbox"> <div class="a"/><div class="c"/> </div> <div class="flexbox"> <div class="b"/><div class="c"/> </div> <!-- Three items --> <div class="flexbox"> <div class="a"/><div class="b"/><div class="c"/> </div> <div class="flexbox"> <div class="a"/><div class="c"/><div class="b"/> </div> <div class="flexbox"> <div class="b"/><div class="a"/><div class="c"/> </div> <div class="flexbox"> <div class="b"/><div class="c"/><div class="a"/> </div> <div class="flexbox"> <div class="c"/><div class="a"/><div class="b"/> </div> <div class="flexbox"> <div class="c"/><div class="b"/><div class="a"/> </div> </body> </html>