webkit-box-align-vert-1.html (4365B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title> 9 CSS Test: vertically-oriented "display: -webkit-box" container, 10 with all the various -webkit-box-align values. 11 </title> 12 <style> 13 .box { 14 display: -webkit-box; 15 -webkit-box-orient: vertical; 16 border: 1px solid black; 17 margin: 5px 20px; 18 float: left; /* For testing in "rows" */ 19 font: 10px serif; 20 } 21 .box > *:nth-child(1) { 22 background: turquoise; 23 /* auto width */ 24 height: 1em; 25 } 26 .box > *:nth-child(2) { 27 background: salmon; 28 font-size: 50%; 29 width: 2em; 30 /* auto height */ 31 } 32 33 .bastart { -webkit-box-align: start; } 34 .bacenter { -webkit-box-align: center; } 35 .baend { -webkit-box-align: end; } 36 .babaseline { -webkit-box-align: baseline; } 37 .bastretch { -webkit-box-align: stretch; } 38 br { clear: both; } 39 </style> 40 </head> 41 <body> 42 <!-- FIRST ROW: Default -webkit-box-align --> 43 <!-- intrinsically sized --> 44 <div class="box"> 45 <div>a</div><div>b</div> 46 </div> 47 48 <!-- explicit size, extra width --> 49 <div class="box" style="width: 36px"> 50 <div>a</div><div>b</div> 51 </div> 52 53 <!-- explicit size, extra height --> 54 <div class="box" style="height: 40px"> 55 <div>a</div><div>b</div> 56 </div> 57 58 <!-- explicit size, extra height and width --> 59 <div class="box" style="width: 36px; height: 40px"> 60 <div>a</div><div>b</div> 61 </div> 62 <br> 63 64 <!-- SECOND ROW: -webkit-box-align: start --> 65 <!-- intrinsically sized --> 66 <div class="box bastart"> 67 <div>a</div><div>b</div> 68 </div> 69 70 <!-- explicit size, extra width --> 71 <div class="box bastart" style="width: 36px"> 72 <div>a</div><div>b</div> 73 </div> 74 75 <!-- explicit size, extra height --> 76 <div class="box bastart" style="height: 40px"> 77 <div>a</div><div>b</div> 78 </div> 79 80 <!-- explicit size, extra height and width --> 81 <div class="box bastart" style="width: 36px; height: 40px"> 82 <div>a</div><div>b</div> 83 </div> 84 <br> 85 86 <!-- THIRD ROW: -webkit-box-align: center --> 87 <!-- intrinsically sized --> 88 <div class="box bacenter"> 89 <div>a</div><div>b</div> 90 </div> 91 92 <!-- explicit size, extra width --> 93 <div class="box bacenter" style="width: 36px"> 94 <div>a</div><div>b</div> 95 </div> 96 97 <!-- explicit size, extra height --> 98 <div class="box bacenter" style="height: 40px"> 99 <div>a</div><div>b</div> 100 </div> 101 102 <!-- explicit size, extra height and width --> 103 <div class="box bacenter" style="width: 36px; height: 40px"> 104 <div>a</div><div>b</div> 105 </div> 106 <br> 107 108 <!-- FOURTH ROW: -webkit-box-align: end --> 109 <!-- intrinsically sized --> 110 <div class="box baend"> 111 <div>a</div><div>b</div> 112 </div> 113 114 <!-- explicit size, extra width --> 115 <div class="box baend" style="width: 36px"> 116 <div>a</div><div>b</div> 117 </div> 118 119 <!-- explicit size, extra height --> 120 <div class="box baend" style="height: 40px"> 121 <div>a</div><div>b</div> 122 </div> 123 124 <!-- explicit size, extra height and width --> 125 <div class="box baend" style="width: 36px; height: 40px"> 126 <div>a</div><div>b</div> 127 </div> 128 <br> 129 130 <!-- FIFTH ROW: -webkit-box-align: baseline --> 131 <!-- intrinsically sized --> 132 <div class="box babaseline"> 133 <div>a</div><div>b</div> 134 </div> 135 136 <!-- explicit size, extra width --> 137 <div class="box babaseline" style="width: 36px"> 138 <div>a</div><div>b</div> 139 </div> 140 141 <!-- explicit size, extra height --> 142 <div class="box babaseline" style="height: 40px"> 143 <div>a</div><div>b</div> 144 </div> 145 146 <!-- explicit size, extra height and width --> 147 <div class="box babaseline" style="width: 36px; height: 40px"> 148 <div>a</div><div>b</div> 149 </div> 150 <br> 151 <!-- SIXTH ROW: -webkit-box-align: stretch --> 152 <!-- intrinsically sized --> 153 <div class="box bastretch"> 154 <div>a</div><div>b</div> 155 </div> 156 157 <!-- explicit size, extra width --> 158 <div class="box bastretch" style="width: 36px"> 159 <div>a</div><div>b</div> 160 </div> 161 162 <!-- explicit size, extra height --> 163 <div class="box bastretch" style="height: 40px"> 164 <div>a</div><div>b</div> 165 </div> 166 167 <!-- explicit size, extra height and width --> 168 <div class="box bastretch" style="width: 36px; height: 40px"> 169 <div>a</div><div>b</div> 170 </div> 171 <br> 172 173 </body> 174 </html>