flexbox-justify-content-vert-005-ref.xhtml (3066B)
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-right: 2px; 13 float: left; 14 border: 1px dotted black; 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"/> 38 </div> 39 <div class="flexbox"> 40 <div class="a"/><div class="b"></div> 41 </div> 42 <div class="flexbox"> 43 <div class="a"/><div class="b"/><div class="c"/> 44 </div> 45 46 <!-- flex-start --> 47 <div class="flexbox"> 48 <div class="a"/> 49 </div> 50 <div class="flexbox"> 51 <div class="a"/><div class="b"/> 52 </div> 53 <div class="flexbox"> 54 <div class="a"/><div class="b"/><div class="c"/> 55 </div> 56 57 <!-- flex-end --> 58 <div class="flexbox"> 59 <div class="a"/> 60 </div> 61 <div class="flexbox"> 62 <div class="a"/><div class="b"/> 63 </div> 64 <div class="flexbox"> 65 <div class="a"/><div class="b"/><div class="c"/> 66 </div> 67 68 <!-- center --> 69 <div class="flexbox"> 70 <div class="a"/> 71 </div> 72 <div class="flexbox"> 73 <div class="a"/><div class="b"/> 74 </div> 75 <div class="flexbox"> 76 <div class="a"/><div class="b"/><div class="c"/> 77 </div> 78 79 <!-- space-between --> 80 <div class="flexbox"> 81 <div class="a"/> 82 </div> 83 <div class="flexbox"> 84 <div class="a"/><div class="b"/> 85 </div> 86 <div class="flexbox"> 87 <div class="a"/><div class="b"/><div class="c"/> 88 </div> 89 90 <!-- space-around --> 91 <div class="flexbox"> 92 <div class="a"/> 93 </div> 94 <div class="flexbox"> 95 <div class="a"/><div class="b"/> 96 </div> 97 <div class="flexbox"> 98 <div class="a"/><div class="b"/><div class="c"/> 99 </div> 100 101 <!-- space-evenly --> 102 <div class="flexbox"> 103 <div class="a"/> 104 </div> 105 <div class="flexbox"> 106 <div class="a"/><div class="b"/> 107 </div> 108 <div class="flexbox"> 109 <div class="a"/><div class="b"/><div class="c"/> 110 </div> 111 112 <!-- left --> 113 <div class="flexbox"> 114 <div class="a"/> 115 </div> 116 <div class="flexbox"> 117 <div class="a"/><div class="b"/> 118 </div> 119 <div class="flexbox"> 120 <div class="a"/><div class="b"/><div class="c"/> 121 </div> 122 123 <!-- right --> 124 <div class="flexbox"> 125 <div class="a"/> 126 </div> 127 <div class="flexbox"> 128 <div class="a"/><div class="b"/> 129 </div> 130 <div class="flexbox"> 131 <div class="a"/><div class="b"/><div class="c"/> 132 </div> 133 134 </body> 135 </html>