flexbox-writing-mode-006.html (2585B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction"> 11 <link rel="match" href="flexbox-writing-mode-006-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 .flexContainer { 15 display: flex; 16 width: 40px; 17 height: 30px; 18 border: 1px solid gray; 19 margin-bottom: 5px; 20 direction: rtl; 21 writing-mode: vertical-lr; 22 } 23 .flexContainer > * { 24 width: 20px; 25 height: 15px; 26 } 27 .item1 { 28 /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ 29 background: cyan; 30 } 31 .item2 { 32 background: magenta; 33 } 34 .item3 { 35 background: yellow; 36 } 37 .item4 { 38 background: black; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="flexContainer" style="flex-flow: row wrap"> 44 <div class="item1"></div><div class="item2"></div> 45 <div class="item3"></div><div class="item4"></div> 46 </div> 47 <div class="flexContainer" style="flex-flow: row wrap-reverse"> 48 <div class="item1"></div><div class="item2"></div> 49 <div class="item3"></div><div class="item4"></div> 50 </div> 51 <div class="flexContainer" style="flex-flow: row-reverse wrap"> 52 <div class="item1"></div><div class="item2"></div> 53 <div class="item3"></div><div class="item4"></div> 54 </div> 55 <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse"> 56 <div class="item1"></div><div class="item2"></div> 57 <div class="item3"></div><div class="item4"></div> 58 </div> 59 60 <div class="flexContainer" style="flex-flow: column wrap"> 61 <div class="item1"></div><div class="item2"></div> 62 <div class="item3"></div><div class="item4"></div> 63 </div> 64 <div class="flexContainer" style="flex-flow: column wrap-reverse"> 65 <div class="item1"></div><div class="item2"></div> 66 <div class="item3"></div><div class="item4"></div> 67 </div> 68 <div class="flexContainer" style="flex-flow: column-reverse wrap"> 69 <div class="item1"></div><div class="item2"></div> 70 <div class="item3"></div><div class="item4"></div> 71 </div> 72 <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse"> 73 <div class="item1"></div><div class="item2"></div> 74 <div class="item3"></div><div class="item4"></div> 75 </div> 76 77 </body> 78 </html>