webkit-box-horizontal-rtl-variants-ref.html (1531B)
1 <!DOCTYPE html> 2 <style> 3 .flexbox { 4 width: 300px; 5 display: flex; 6 direction: rtl; 7 border-style: solid; 8 border-width: 1px 2px 1px 4px; 9 } 10 11 .redbox { 12 background: red; 13 width: 100px; 14 flex-shrink: 0; 15 } 16 17 .greenbox { 18 background: green; 19 width: 100px; 20 flex-shrink: 0; 21 } 22 23 </style> 24 <p>Exercises -webkit-box with various box-pack settings when rtl. In all cases 25 the order of letters in the boxes should be alphabetized left to right. 26 <p>Start. Boxes should be aligned to right side. 27 <div class="flexbox"> 28 <div class="redbox">B</div> 29 <div class="greenbox">A</div> 30 </div> 31 32 <p>Centered. Boxes should be centered. 33 <div class="flexbox" style="justify-content: center;"> 34 <div class="redbox">B</div> 35 <div class="greenbox">A</div> 36 </div> 37 38 <p>End. Boxes should be aligned to left side. 39 <div class="flexbox" style="justify-content: flex-end;"> 40 <div class="redbox">B</div> 41 <div class="greenbox">A</div> 42 </div> 43 44 <p>Start, content too big. 45 <div class="flexbox"> 46 <div class="redbox">D</div> 47 <div class="greenbox">C</div> 48 <div class="redbox">B</div> 49 <div class="greenbox">A</div> 50 </div> 51 52 <p>Center, content too big. 53 <div class="flexbox" style="justify-content: center;"> 54 <div class="redbox">D</div> 55 <div class="greenbox">C</div> 56 <div class="redbox">B</div> 57 <div class="greenbox">A</div> 58 </div> 59 60 <p>End, content too big. 61 <div class="flexbox" style="justify-content: flex-end;"> 62 <div class="redbox">D</div> 63 <div class="greenbox">C</div> 64 <div class="redbox">B</div> 65 <div class="greenbox">A</div> 66 </div>