<?xml version="1.0" encoding="UTF-8"?> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Reftest Reference</title> <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> <style> body { margin-left: 0px; } /* We'll apply margins w/ style attribute */ div.flexbox { margin-bottom: 2px; line-height: 0; } div.flexbox > * { display: inline-block; } div.a { height: 20px; width: 35px; background: lightgreen; } div.b { height: 20px; width: 40px; background: pink; } div.c { height: 20px; width: 45px; background: orange; } </style> </head> <body> <!-- default (start) --> <div class="flexbox" style="margin-left: 100px"> <div class="a"/> </div> <div class="flexbox" style="margin-left: 100px"> <div class="a"/><div class="b"></div> </div> <div class="flexbox" style="margin-left: 100px"> <div class="a"/><div class="b"/><div class="c"/> </div> <!-- flex-start --> <div class="flexbox" style="margin-left: 100px"> <div class="a"/> </div> <div class="flexbox" style="margin-left: 100px"> <div class="a"/><div class="b"/> </div> <div class="flexbox" style="margin-left: 100px"> <div class="a"/><div class="b"/><div class="c"/> </div> <!-- flex-end --> <div class="flexbox" style="margin-left: 95px"> <div class="a"/> </div> <div class="flexbox" style="margin-left: 55px"> <div class="a"/><div class="b"/> </div> <div class="flexbox" style="margin-left: 10px"> <div class="a"/><div class="b"/><div class="c"/> </div> <!-- center --> <div class="flexbox" style="margin-left: 97.5px"> <div class="a"/> </div> <div class="flexbox" style="margin-left: 77.5px"> <div class="a"/><div class="b"/> </div> <div class="flexbox" style="margin-left: 55px"> <div class="a"/><div class="b"/><div class="c"/> </div> <!-- space-between --> <div class="flexbox" style="margin-left: 100px"> <div class="a"/> </div> <div class="flexbox" style="margin-left: 100px"> <div class="a"/><div class="b"/> </div> <div class="flexbox" style="margin-left: 100px"> <div class="a"/><div class="b"/><div class="c"/> </div> <!-- space-around --> <div class="flexbox" style="margin-left: 97.5px"> <div class="a"/> </div> <div class="flexbox" style="margin-left: 77.5px"> <div class="a"/><div class="b"/> </div> <div class="flexbox" style="margin-left: 55px"> <div class="a"/><div class="b"/><div class="c"/> </div> <!-- space-evenly --> <div class="flexbox" style="margin-left: 97.5px"> <div class="a"/> </div> <div class="flexbox" style="margin-left: 77.5px"> <div class="a"/><div class="b"/> </div> <div class="flexbox" style="margin-left: 55px"> <div class="a"/><div class="b"/><div class="c"/> </div> <!-- left --> <div class="flexbox" style="margin-left: 100px"> <div class="a"/> </div> <div class="flexbox" style="margin-left: 100px"> <div class="a"/><div class="b"/> </div> <div class="flexbox" style="margin-left: 100px"> <div class="a"/><div class="b"/><div class="c"/> </div> <!-- right --> <div class="flexbox" style="margin-left: 95px"> <div class="a"/> </div> <div class="flexbox" style="margin-left: 55px"> <div class="a"/><div class="b"/> </div> <div class="flexbox" style="margin-left: 10px"> <div class="a"/><div class="b"/><div class="c"/> </div> </body> </html>