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