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