webkit-box-direction-1-ref.html (1710B)
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 } 22 .box > *:nth-child(2) { 23 background: salmon; 24 } 25 26 .rtl { direction: rtl; } 27 28 .horizNormal { 29 flex-direction: row; 30 } 31 .horizReverse { 32 flex-direction: row-reverse; 33 } 34 .vertNormal { 35 flex-direction: column; 36 } 37 .vertReverse { 38 flex-direction: column-reverse; 39 } 40 br { clear: both; } 41 </style> 42 </head> 43 <body> 44 <!-- FIRST ROW: '-webkit-box-orient: horizontal', default 'direction' --> 45 <div class="box horizNormal"> 46 <div>a</div><div>b</div> 47 </div> 48 <div class="box horizReverse"> 49 <div>a</div><div>b</div> 50 </div> 51 52 <br> 53 54 <!-- SECOND ROW: '-webkit-box-orient: horizontal', 'direction: rtl' --> 55 <div class="box horizNormal rtl"> 56 <div>a</div><div>b</div> 57 </div> 58 <div class="box horizReverse rtl"> 59 <div>a</div><div>b</div> 60 </div> 61 62 <br> 63 64 <!-- THIRD ROW: '-webkit-box-orient: vertical', default 'direction' --> 65 <div class="box vertNormal"> 66 <div>a</div><div>b</div> 67 </div> 68 <div class="box vertReverse"> 69 <div>a</div><div>b</div> 70 </div> 71 72 <br> 73 74 <!-- FOURTH ROW: '-webkit-box-orient: vertical', 'direction: rtl' --> 75 <div class="box vertNormal rtl"> 76 <div>a</div><div>b</div> 77 </div> 78 <div class="box vertReverse rtl"> 79 <div>a</div><div>b</div> 80 </div> 81 </body> 82 </html>