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