sideways-lr-main-axis-ref.html (1648B)
1 <!DOCTYPE html> 2 <title>Reference: sideways-lr flexbox main axis progresses in correct direction</title> 3 <style> 4 .container { 5 font-size: 0 6 } 7 .item { 8 width: 20px; 9 height: 20px; 10 } 11 12 .item:nth-child(1) { background-color: lime; } 13 .item:nth-child(2) { background-color: limegreen; } 14 .item:nth-child(3) { background-color: green; } 15 16 .container.reverse .item:nth-child(1) { background-color: green; } 17 .container.reverse .item:nth-child(2) { background-color: limegreen; } 18 .container.reverse .item:nth-child(3) { background-color: lime; } 19 20 .container.row .item { display: inline-block; } 21 </style> 22 <div class="container reverse"> 23 <div class="item"></div> 24 <div class="item"></div> 25 <div class="item"></div> 26 </div> 27 <div class="container"> 28 <div class="item"></div> 29 <div class="item"></div> 30 <div class="item"></div> 31 </div> 32 <div class="container"> 33 <div class="item"></div> 34 <div class="item"></div> 35 <div class="item"></div> 36 </div> 37 <div class="container reverse"> 38 <div class="item"></div> 39 <div class="item"></div> 40 <div class="item"></div> 41 </div> 42 <div class="container row"> 43 <div class="item"></div> 44 <div class="item"></div> 45 <div class="item"></div> 46 </div> 47 <div class="container row"> 48 <div class="item"></div> 49 <div class="item"></div> 50 <div class="item"></div> 51 </div> 52 <div class="container row reverse"> 53 <div class="item"></div> 54 <div class="item"></div> 55 <div class="item"></div> 56 </div> 57 <div class="container row reverse"> 58 <div class="item"></div> 59 <div class="item"></div> 60 <div class="item"></div> 61 </div>