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