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