webkit-box-flex-1.html (1945B)
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: "-webkit-box-flex" in a "display: -webkit-box" container 10 </title> 11 <style> 12 .box { 13 display: -webkit-box; 14 border: 1px solid black; 15 margin: 5px 20px; 16 width: 100px; 17 float: left; /* For testing in "rows" */ 18 font: 10px serif; 19 } 20 .box > *:nth-child(1) { background: turquoise; } 21 .box > *:nth-child(2) { background: salmon; } 22 .box > *:nth-child(3) { background: yellow; } 23 24 .huge { width: 120px } 25 .bf1 { -webkit-box-flex: 1 } 26 .bf3 { -webkit-box-flex: 3 } 27 28 br { clear: both; } 29 </style> 30 </head> 31 <body> 32 <!-- FIRST ROW: Default -webkit-box-flex --> 33 <div class="box"> 34 <div>a</div> 35 </div> 36 37 <div class="box"> 38 <div>a</div><div>b</div> 39 </div> 40 41 <div class="box"> 42 <div class="huge">a</div> 43 </div> 44 45 <br> 46 47 <!-- SECOND ROW: One item has nonzero -webkit-box-flex --> 48 <div class="box"> 49 <div class="bf1">a</div> 50 </div> 51 52 <div class="box"> 53 <div>a</div><div class="bf1">b</div> 54 </div> 55 56 <div class="box"> 57 <div class="huge bf1">a</div> 58 </div> 59 60 <br> 61 62 <!-- THIRD ROW: Two items have nonzero (equal) -webkit-box-flex --> 63 <div class="box"> 64 <div class="bf1">a</div><div class="bf1">b</div> 65 </div> 66 67 <div class="box"> 68 <div class="bf1">a</div><div>b</div><div class="bf1">c</div> 69 </div> 70 71 <div class="box"> 72 <div class="huge bf1">a</div> 73 <div>b</div> 74 <div class="huge bf1">c</div> 75 </div> 76 77 <br> 78 79 <!-- FOURTH ROW: Non-equal nonzero -webkit-box-flex values --> 80 <div class="box"> 81 <div class="bf1">a</div><div class="bf3">b</div> 82 </div> 83 84 <div class="box"> 85 <div class="bf3">a</div><div class="bf1">b</div> 86 </div> 87 88 <div class="box"> 89 <div class="huge bf1">a</div> 90 <div class="huge bf3">b</div> 91 </div> 92 93 </body> 94 </html>