flexbox-justify-content-horiz-001-ref.xhtml (3876B)
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 div.flexbox { 12 margin-bottom: 2px; 13 line-height: 0; 14 } 15 div.flexbox > * { 16 display: inline-block; 17 } 18 div.a { 19 height: 10px; 20 width: 10px; 21 background: lightgreen; 22 } 23 div.b { 24 height: 10px; 25 width: 50px; 26 background: pink; 27 } 28 div.c { 29 height: 10px; 30 width: 100px; 31 background: orange; 32 } 33 </style> 34 </head> 35 <body> 36 37 <!-- default (start) --> 38 <div class="flexbox"> 39 <div class="a"/> 40 </div> 41 <div class="flexbox"> 42 <div class="a"/><div class="b"></div> 43 </div> 44 <div class="flexbox"> 45 <div class="a"/><div class="b"/><div class="c"/> 46 </div> 47 48 <!-- flex-start --> 49 <div class="flexbox"> 50 <div class="a"/> 51 </div> 52 <div class="flexbox"> 53 <div class="a"/><div class="b"/> 54 </div> 55 <div class="flexbox"> 56 <div class="a"/><div class="b"/><div class="c"/> 57 </div> 58 59 <!-- flex-end --> 60 <div class="flexbox"> 61 <div class="a" style="margin-left: 190px"/> 62 </div> 63 <div class="flexbox"> 64 <div class="a" style="margin-left: 140px"/><div class="b"/> 65 </div> 66 <div class="flexbox"> 67 <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/> 68 </div> 69 70 <!-- center --> 71 <div class="flexbox"> 72 <div class="a" style="margin-left: 95px"/> 73 </div> 74 <div class="flexbox"> 75 <div class="a" style="margin-left: 70px"/><div class="b"/> 76 </div> 77 <div class="flexbox"> 78 <div class="a" style="margin-left: 20px"/><div class="b"/><div class="c"/> 79 </div> 80 81 <!-- space-between --> 82 <div class="flexbox"> 83 <div class="a"/> 84 </div> 85 <div class="flexbox"> 86 <div class="a"/><div class="b" style="margin-left: 140px"/> 87 </div> 88 <div class="flexbox"> 89 <div class="a" 90 /><div class="b" style="margin-left: 20px" 91 /><div class="c" style="margin-left: 20px"/> 92 </div> 93 94 <!-- space-around --> 95 <div class="flexbox"> 96 <div class="a" style="margin-left: 95px"/> 97 </div> 98 <div class="flexbox"> 99 <div class="a" style="margin-left: 35px" 100 /><div class="b" style="margin-left: 70px"/> 101 </div> 102 <div class="flexbox"> 103 <div class="a" style="margin-left: calc(40px / 6)" 104 /><div class="b" style="margin-left: calc(40px / 3)" 105 /><div class="c" style="margin-left: calc(40px / 3)"/> 106 </div> 107 108 <!-- space-evenly --> 109 <div class="flexbox"> 110 <div class="a" style="margin-left: 95px"/> 111 </div> 112 <div class="flexbox"> 113 <div class="a" style="margin-left: calc(140px / 3)" 114 /><div class="b" style="margin-left: calc(140px / 3)"/> 115 </div> 116 <div class="flexbox"> 117 <div class="a" style="margin-left: 10px" 118 /><div class="b" style="margin-left: 10px" 119 /><div class="c" style="margin-left: 10px"/> 120 </div> 121 122 <!-- left --> 123 <div class="flexbox"> 124 <div class="a"/> 125 </div> 126 <div class="flexbox"> 127 <div class="a"/><div class="b"/> 128 </div> 129 <div class="flexbox"> 130 <div class="a"/><div class="b"/><div class="c"/> 131 </div> 132 133 <!-- right --> 134 <div class="flexbox"> 135 <div class="a" style="margin-left: 190px"/> 136 </div> 137 <div class="flexbox"> 138 <div class="a" style="margin-left: 140px"/><div class="b"/> 139 </div> 140 <div class="flexbox"> 141 <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/> 142 </div> 143 144 </body> 145 </html>