webkit-box-with-modern-css-2-ref.html (893B)
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 flex-direction: column; 15 border: 1px solid black; 16 margin: 5px 20px; 17 height: 100px; 18 float: left; /* For testing in "rows" */ 19 font: 10px serif; 20 } 21 22 .box > *:nth-child(1) { background: turquoise; } 23 .box > *:nth-child(2) { background: salmon; } 24 25 br { clear: both; } 26 </style> 27 </head> 28 <body> 29 <!-- FIRST ROW --> 30 <div class="box"> 31 <div>a</div> 32 <div>b</div> 33 </div> 34 35 <div class="box"> 36 <div>a</div> 37 <div>b</div> 38 </div> 39 40 <br> 41 42 <!-- SECOND ROW --> 43 <div class="box"> 44 <div>a</div> 45 <div>b</div> 46 </div> 47 48 <div class="box"> 49 <div>a</div> 50 <div>b</div> 51 </div> 52 53 </body> 54 </html>