flexbox-justify-content-vert-005.xhtml (4494B)
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 <!-- Testcase to exercise each possible value of the 'justify-content' 7 property, in an auto-sized vertical flex container. The flex container 8 should shrink-wrap its contents' heights, leaving no packing space 9 available. So, the "justify-content" values should have no effect 10 in this testcase. --> 11 <html xmlns="http://www.w3.org/1999/xhtml"> 12 <head> 13 <title>CSS Test: Testing 'justify-content' in an auto-sized vertical flex container</title> 14 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 15 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/> 16 <link rel="match" href="flexbox-justify-content-vert-005-ref.xhtml"/> 17 <style> 18 div.flexbox { 19 display: flex; 20 flex-direction: column; 21 margin-right: 2px; 22 float: left; 23 border: 1px dotted black; 24 } 25 div.a { 26 width: 20px; 27 flex: 0 10px; 28 background: lightgreen; 29 } 30 div.b { 31 width: 20px; 32 flex: 0 50px; 33 background: pink; 34 } 35 div.c { 36 width: 20px; 37 flex: 0 100px; 38 background: orange; 39 } 40 </style> 41 </head> 42 <body> 43 44 <!-- default (start) --> 45 <div class="flexbox"> 46 <div class="a"/> 47 </div> 48 <div class="flexbox"> 49 <div class="a"/><div class="b"></div> 50 </div> 51 <div class="flexbox"> 52 <div class="a"/><div class="b"/><div class="c"/> 53 </div> 54 55 <!-- flex-start --> 56 <div class="flexbox" style="justify-content: flex-start"> 57 <div class="a"/> 58 </div> 59 <div class="flexbox" style="justify-content: flex-start"> 60 <div class="a"/><div class="b"/> 61 </div> 62 <div class="flexbox" style="justify-content: flex-start"> 63 <div class="a"/><div class="b"/><div class="c"/> 64 </div> 65 66 <!-- flex-end --> 67 <div class="flexbox" style="justify-content: flex-end"> 68 <div class="a"/> 69 </div> 70 <div class="flexbox" style="justify-content: flex-end"> 71 <div class="a"/><div class="b"/> 72 </div> 73 <div class="flexbox" style="justify-content: flex-end"> 74 <div class="a"/><div class="b"/><div class="c"/> 75 </div> 76 77 <!-- center --> 78 <div class="flexbox" style="justify-content: center"> 79 <div class="a"/> 80 </div> 81 <div class="flexbox" style="justify-content: center"> 82 <div class="a"/><div class="b"/> 83 </div> 84 <div class="flexbox" style="justify-content: center"> 85 <div class="a"/><div class="b"/><div class="c"/> 86 </div> 87 88 <!-- space-between --> 89 <div class="flexbox" style="justify-content: space-between"> 90 <div class="a"/> 91 </div> 92 <div class="flexbox" style="justify-content: space-between"> 93 <div class="a"/><div class="b"/> 94 </div> 95 <div class="flexbox" style="justify-content: space-between"> 96 <div class="a"/><div class="b"/><div class="c"/> 97 </div> 98 99 <!-- space-around --> 100 <div class="flexbox" style="justify-content: space-around"> 101 <div class="a"/> 102 </div> 103 <div class="flexbox" style="justify-content: space-around"> 104 <div class="a"/><div class="b"/> 105 </div> 106 <div class="flexbox" style="justify-content: space-around"> 107 <div class="a"/><div class="b"/><div class="c"/> 108 </div> 109 110 <!-- space-evenly --> 111 <div class="flexbox" style="justify-content: space-evenly"> 112 <div class="a"/> 113 </div> 114 <div class="flexbox" style="justify-content: space-evenly"> 115 <div class="a"/><div class="b"/> 116 </div> 117 <div class="flexbox" style="justify-content: space-evenly"> 118 <div class="a"/><div class="b"/><div class="c"/> 119 </div> 120 121 <!-- left --> 122 <div class="flexbox" style="justify-content: left"> 123 <div class="a"/> 124 </div> 125 <div class="flexbox" style="justify-content: left"> 126 <div class="a"/><div class="b"/> 127 </div> 128 <div class="flexbox" style="justify-content: left"> 129 <div class="a"/><div class="b"/><div class="c"/> 130 </div> 131 132 <!-- right --> 133 <div class="flexbox" style="justify-content: right"> 134 <div class="a"/> 135 </div> 136 <div class="flexbox" style="justify-content: right"> 137 <div class="a"/><div class="b"/> 138 </div> 139 <div class="flexbox" style="justify-content: right"> 140 <div class="a"/><div class="b"/><div class="c"/> 141 </div> 142 143 </body> 144 </html>