flexbox-justify-content-horiz-006.xhtml (4290B)
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 reversed horizontal flex container</title> 11 <link rel="author" title="Mihir Iyer" href="mailto:miyer@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-006-ref.xhtml"/> 14 <style> 15 div.flexbox { 16 display: flex; 17 flex-direction: row-reverse; 18 width: 200px; 19 margin-bottom: 2px; 20 } 21 div.a { 22 height: 20px; 23 flex: 0 10px; 24 background: lightgreen; 25 } 26 div.b { 27 height: 20px; 28 flex: 0 50px; 29 background: pink; 30 } 31 div.c { 32 height: 20px; 33 flex: 0 100px; 34 background: orange; 35 } 36 </style> 37 </head> 38 <body> 39 40 <!-- default (start) --> 41 <div class="flexbox"> 42 <div class="a"/> 43 </div> 44 <div class="flexbox"> 45 <div class="a"/><div class="b"></div> 46 </div> 47 <div class="flexbox"> 48 <div class="a"/><div class="b"/><div class="c"/> 49 </div> 50 51 <!-- flex-start --> 52 <div class="flexbox" style="justify-content: flex-start"> 53 <div class="a"/> 54 </div> 55 <div class="flexbox" style="justify-content: flex-start"> 56 <div class="a"/><div class="b"/> 57 </div> 58 <div class="flexbox" style="justify-content: flex-start"> 59 <div class="a"/><div class="b"/><div class="c"/> 60 </div> 61 62 <!-- flex-end --> 63 <div class="flexbox" style="justify-content: flex-end"> 64 <div class="a"/> 65 </div> 66 <div class="flexbox" style="justify-content: flex-end"> 67 <div class="a"/><div class="b"/> 68 </div> 69 <div class="flexbox" style="justify-content: flex-end"> 70 <div class="a"/><div class="b"/><div class="c"/> 71 </div> 72 73 <!-- center --> 74 <div class="flexbox" style="justify-content: center"> 75 <div class="a"/> 76 </div> 77 <div class="flexbox" style="justify-content: center"> 78 <div class="a"/><div class="b"/> 79 </div> 80 <div class="flexbox" style="justify-content: center"> 81 <div class="a"/><div class="b"/><div class="c"/> 82 </div> 83 84 <!-- space-between --> 85 <div class="flexbox" style="justify-content: space-between"> 86 <div class="a"/> 87 </div> 88 <div class="flexbox" style="justify-content: space-between"> 89 <div class="a"/><div class="b"/> 90 </div> 91 <div class="flexbox" style="justify-content: space-between"> 92 <div class="a"/><div class="b"/><div class="c"/> 93 </div> 94 95 <!-- space-around --> 96 <div class="flexbox" style="justify-content: space-around"> 97 <div class="a"/> 98 </div> 99 <div class="flexbox" style="justify-content: space-around"> 100 <div class="a"/><div class="b"/> 101 </div> 102 <div class="flexbox" style="justify-content: space-around"> 103 <div class="a"/><div class="b"/><div class="c"/> 104 </div> 105 106 <!-- space-evenly --> 107 <div class="flexbox" style="justify-content: space-evenly"> 108 <div class="a"/> 109 </div> 110 <div class="flexbox" style="justify-content: space-evenly"> 111 <div class="a"/><div class="b"/> 112 </div> 113 <div class="flexbox" style="justify-content: space-evenly"> 114 <div class="a"/><div class="b"/><div class="c"/> 115 </div> 116 117 118 <!-- left --> 119 <div class="flexbox" style="justify-content: left"> 120 <div class="a"/> 121 </div> 122 <div class="flexbox" style="justify-content: left"> 123 <div class="a"/><div class="b"/> 124 </div> 125 <div class="flexbox" style="justify-content: left"> 126 <div class="a"/><div class="b"/><div class="c"/> 127 </div> 128 129 <!-- right --> 130 <div class="flexbox" style="justify-content: right"> 131 <div class="a"/> 132 </div> 133 <div class="flexbox" style="justify-content: right"> 134 <div class="a"/><div class="b"/> 135 </div> 136 <div class="flexbox" style="justify-content: right"> 137 <div class="a"/><div class="b"/><div class="c"/> 138 </div> 139 </body> 140 </html>