webkit-box-pack-horiz-1-ref.html (3606B)
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 .bpstart { justify-content: flex-start; } 32 .bpcenter { justify-content: center; } 33 .bpend { justify-content: flex-end; } 34 .bpjustify { justify-content: space-between; } 35 br { clear: both; } 36 </style> 37 </head> 38 <body> 39 <!-- FIRST ROW: Default -webkit-box-pack --> 40 <!-- intrinsically sized --> 41 <div class="box"> 42 <div>a</div><div>b</div> 43 </div> 44 45 <!-- explicit size, extra width --> 46 <div class="box" style="width: 36px"> 47 <div>a</div><div>b</div> 48 </div> 49 50 <!-- explicit size, extra height --> 51 <div class="box" style="height: 40px"> 52 <div>a</div><div>b</div> 53 </div> 54 55 <!-- explicit size, extra height and width --> 56 <div class="box" style="width: 36px; height: 40px"> 57 <div>a</div><div>b</div> 58 </div> 59 <br> 60 61 <!-- SECOND ROW: -webkit-box-pack: start --> 62 <!-- intrinsically sized --> 63 <div class="box bpstart"> 64 <div>a</div><div>b</div> 65 </div> 66 67 <!-- explicit size, extra width --> 68 <div class="box bpstart" style="width: 36px"> 69 <div>a</div><div>b</div> 70 </div> 71 72 <!-- explicit size, extra height --> 73 <div class="box bpstart" style="height: 40px"> 74 <div>a</div><div>b</div> 75 </div> 76 77 <!-- explicit size, extra height and width --> 78 <div class="box bpstart" style="width: 36px; height: 40px"> 79 <div>a</div><div>b</div> 80 </div> 81 <br> 82 83 <!-- THIRD ROW: -webkit-box-pack: center --> 84 <!-- intrinsically sized --> 85 <div class="box bpcenter"> 86 <div>a</div><div>b</div> 87 </div> 88 89 <!-- explicit size, extra width --> 90 <div class="box bpcenter" style="width: 36px"> 91 <div>a</div><div>b</div> 92 </div> 93 94 <!-- explicit size, extra height --> 95 <div class="box bpcenter" style="height: 40px"> 96 <div>a</div><div>b</div> 97 </div> 98 99 <!-- explicit size, extra height and width --> 100 <div class="box bpcenter" style="width: 36px; height: 40px"> 101 <div>a</div><div>b</div> 102 </div> 103 <br> 104 105 <!-- FOURTH ROW: -webkit-box-pack: end --> 106 <!-- intrinsically sized --> 107 <div class="box bpend"> 108 <div>a</div><div>b</div> 109 </div> 110 111 <!-- explicit size, extra width --> 112 <div class="box bpend" style="width: 36px"> 113 <div>a</div><div>b</div> 114 </div> 115 116 <!-- explicit size, extra height --> 117 <div class="box bpend" style="height: 40px"> 118 <div>a</div><div>b</div> 119 </div> 120 121 <!-- explicit size, extra height and width --> 122 <div class="box bpend" style="width: 36px; height: 40px"> 123 <div>a</div><div>b</div> 124 </div> 125 <br> 126 127 <!-- FIFTH ROW: -webkit-box-pack: justify --> 128 <!-- intrinsically sized --> 129 <div class="box bpjustify"> 130 <div>a</div><div>b</div> 131 </div> 132 133 <!-- explicit size, extra width --> 134 <div class="box bpjustify" style="width: 36px"> 135 <div>a</div><div>b</div> 136 </div> 137 138 <!-- explicit size, extra height --> 139 <div class="box bpjustify" style="height: 40px"> 140 <div>a</div><div>b</div> 141 </div> 142 143 <!-- explicit size, extra height and width --> 144 <div class="box bpjustify" style="width: 36px; height: 40px"> 145 <div>a</div><div>b</div> 146 </div> 147 <br> 148 149 </body> 150 </html>