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