webkit-box-horizontal-reverse-variants-ref.html (1564B)
1 <!DOCTYPE html> 2 <style> 3 .flexbox { 4 width: 300px; 5 display: flex; 6 flex-direction: row-reverse; 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 direction is 25 reverse. In all cases the order of letters in the boxes should be 26 alphabetized left to right. 27 <p>Start. Boxes should be aligned to right side. 28 <div class="flexbox" style="justify-content: flex-end;"> 29 <div class="redbox">B</div> 30 <div class="greenbox">A</div> 31 </div> 32 33 <p>Centered. Boxes should be centered. 34 <div class="flexbox" style="justify-content: center;"> 35 <div class="redbox">B</div> 36 <div class="greenbox">A</div> 37 </div> 38 39 <p>End. Boxes should be aligned to left side. 40 <div class="flexbox"> 41 <div class="redbox">B</div> 42 <div class="greenbox">A</div> 43 </div> 44 45 <p>Start, content too big. 46 <div class="flexbox"> 47 <div class="redbox">D</div> 48 <div class="greenbox">C</div> 49 <div class="redbox">B</div> 50 <div class="greenbox">A</div> 51 </div> 52 53 <p>Center, content too big. 54 <div class="flexbox" style="justify-content: center;"> 55 <div class="redbox">D</div> 56 <div class="greenbox">C</div> 57 <div class="redbox">B</div> 58 <div class="greenbox">A</div> 59 </div> 60 61 <p>End, content too big. 62 <div class="flexbox" style="justify-content: flex-end;"> 63 <div class="redbox">D</div> 64 <div class="greenbox">C</div> 65 <div class="redbox">B</div> 66 <div class="greenbox">A</div> 67 </div>