sideways-lr-main-axis.html (2088B)
1 <!DOCTYPE html> 2 <title>sideways-lr flexbox main axis progresses in correct direction</title> 3 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#box-model"> 5 <link rel="match" href="reference/sideways-lr-main-axis-ref.html"> 6 <style> 7 .container { 8 display: flex; 9 } 10 .item { 11 width: 20px; 12 height: 20px; 13 } 14 .item:nth-child(1) { background-color: lime; } 15 .item:nth-child(2) { background-color: limegreen; } 16 .item:nth-child(3) { background-color: green; } 17 </style> 18 <div class="container" style="writing-mode: sideways-lr; flex-direction: row;"> 19 <div class="item"></div> 20 <div class="item"></div> 21 <div class="item"></div> 22 </div> 23 <div class="container" style="writing-mode: sideways-lr; direction: rtl; flex-direction: row;"> 24 <div class="item"></div> 25 <div class="item"></div> 26 <div class="item"></div> 27 </div> 28 <div class="container" style="writing-mode: sideways-lr; flex-direction: row-reverse;"> 29 <div class="item"></div> 30 <div class="item"></div> 31 <div class="item"></div> 32 </div> 33 <div class="container" style="writing-mode: sideways-lr; direction: rtl; flex-direction: row-reverse;"> 34 <div class="item"></div> 35 <div class="item"></div> 36 <div class="item"></div> 37 </div> 38 <div class="container" style="writing-mode: sideways-lr; flex-direction: column;"> 39 <div class="item"></div> 40 <div class="item"></div> 41 <div class="item"></div> 42 </div> 43 <div class="container" style="writing-mode: sideways-lr; direction: rtl; flex-direction: column;"> 44 <div class="item"></div> 45 <div class="item"></div> 46 <div class="item"></div> 47 </div> 48 <div class="container" style="writing-mode: sideways-lr; flex-direction: column-reverse;"> 49 <div class="item"></div> 50 <div class="item"></div> 51 <div class="item"></div> 52 </div> 53 <div class="container" style="writing-mode: sideways-lr; direction: rtl; flex-direction: column-reverse;"> 54 <div class="item"></div> 55 <div class="item"></div> 56 <div class="item"></div> 57 </div>