flexbox-justify-content-horiz-003-ref.xhtml (3900B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head> 8 <title>CSS Reftest Reference</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 10 <style> 11 body { margin-left: 0px; } /* We'll apply margins w/ style attribute */ 12 div.flexbox { 13 margin-bottom: 2px; 14 line-height: 0; 15 } 16 div.flexbox > * { 17 display: inline-block; 18 } 19 div.a { 20 height: 20px; 21 width: 35px; 22 background: lightgreen; 23 } 24 div.b { 25 height: 20px; 26 width: 40px; 27 background: pink; 28 } 29 div.c { 30 height: 20px; 31 width: 45px; 32 background: orange; 33 } 34 </style> 35 </head> 36 <body> 37 38 <!-- default (start) --> 39 <div class="flexbox" style="margin-left: 100px"> 40 <div class="a"/> 41 </div> 42 <div class="flexbox" style="margin-left: 100px"> 43 <div class="a"/><div class="b"></div> 44 </div> 45 <div class="flexbox" style="margin-left: 100px"> 46 <div class="a"/><div class="b"/><div class="c"/> 47 </div> 48 49 <!-- flex-start --> 50 <div class="flexbox" style="margin-left: 100px"> 51 <div class="a"/> 52 </div> 53 <div class="flexbox" style="margin-left: 100px"> 54 <div class="a"/><div class="b"/> 55 </div> 56 <div class="flexbox" style="margin-left: 100px"> 57 <div class="a"/><div class="b"/><div class="c"/> 58 </div> 59 60 <!-- flex-end --> 61 <div class="flexbox" style="margin-left: 95px"> 62 <div class="a"/> 63 </div> 64 <div class="flexbox" style="margin-left: 55px"> 65 <div class="a"/><div class="b"/> 66 </div> 67 <div class="flexbox" style="margin-left: 10px"> 68 <div class="a"/><div class="b"/><div class="c"/> 69 </div> 70 71 <!-- center --> 72 <div class="flexbox" style="margin-left: 97.5px"> 73 <div class="a"/> 74 </div> 75 <div class="flexbox" style="margin-left: 77.5px"> 76 <div class="a"/><div class="b"/> 77 </div> 78 <div class="flexbox" style="margin-left: 55px"> 79 <div class="a"/><div class="b"/><div class="c"/> 80 </div> 81 82 <!-- space-between --> 83 <div class="flexbox" style="margin-left: 100px"> 84 <div class="a"/> 85 </div> 86 <div class="flexbox" style="margin-left: 100px"> 87 <div class="a"/><div class="b"/> 88 </div> 89 <div class="flexbox" style="margin-left: 100px"> 90 <div class="a"/><div class="b"/><div class="c"/> 91 </div> 92 93 <!-- space-around --> 94 <div class="flexbox" style="margin-left: 100px"> 95 <div class="a"/> 96 </div> 97 <div class="flexbox" style="margin-left: 100px"> 98 <div class="a"/><div class="b"/> 99 </div> 100 <div class="flexbox" style="margin-left: 100px"> 101 <div class="a"/><div class="b"/><div class="c"/> 102 </div> 103 104 <!-- space-evenly --> 105 <div class="flexbox" style="margin-left: 100px"> 106 <div class="a"/> 107 </div> 108 <div class="flexbox" style="margin-left: 100px"> 109 <div class="a"/><div class="b"/> 110 </div> 111 <div class="flexbox" style="margin-left: 100px"> 112 <div class="a"/><div class="b"/><div class="c"/> 113 </div> 114 115 <!-- left --> 116 <div class="flexbox" style="margin-left: 100px"> 117 <div class="a"/> 118 </div> 119 <div class="flexbox" style="margin-left: 100px"> 120 <div class="a"/><div class="b"/> 121 </div> 122 <div class="flexbox" style="margin-left: 100px"> 123 <div class="a"/><div class="b"/><div class="c"/> 124 </div> 125 126 <!-- right --> 127 <div class="flexbox" style="margin-left: 95px"> 128 <div class="a"/> 129 </div> 130 <div class="flexbox" style="margin-left: 55px"> 131 <div class="a"/><div class="b"/> 132 </div> 133 <div class="flexbox" style="margin-left: 10px"> 134 <div class="a"/><div class="b"/><div class="c"/> 135 </div> 136 137 </body> 138 </html>