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