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