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