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