doc_flexbox_writing_modes.html (899B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <style> 4 .flex-container { 5 display: flex; 6 } 7 8 .flex-container.vertical-rl { 9 writing-mode: vertical-rl; 10 } 11 12 .flex-container.sideways-lr { 13 writing-mode: sideways-lr; 14 } 15 16 .column { 17 flex-direction: column; 18 } 19 20 .item { 21 min-width: 300px; 22 min-height: 300px; 23 } 24 25 </style> 26 <div class="flex-container vertical-rl"> 27 <span class="row vertical-rl item">Vertical-tb Row content</span> 28 </div> 29 <div class="flex-container column"> 30 <span class="column vertical-tb item">Vertical-tb Column Content</span> 31 </div> 32 <div class="flex-container sideways-lr"> 33 <span class="row vertical-bt item">Vertical-bt Row Content</span> 34 </div> 35 <div class="flex-container vertical-rl column"> 36 <span class="column horizontal-rl item">Horizontal-rl Column Content</span> 37 </div> 38 <div class="flex-container"> 39 <span class="row horizontal-lr item">Horizontal-lr Row Content</span> 40 </div>