flexbox-writing-mode-008-ref.html (1410B)
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 Reftest Reference</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <meta charset="utf-8"> 11 <style> 12 .flexContainer { 13 width: 40px; 14 height: 30px; 15 border: 1px solid gray; 16 margin-bottom: 5px; 17 } 18 .flexContainer > * { 19 width: 20px; 20 height: 15px; 21 float: left; 22 } 23 .item1 { 24 /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */ 25 background: cyan; 26 } 27 .item2 { 28 background: magenta; 29 } 30 .item3 { 31 background: yellow; 32 } 33 .item4 { 34 background: black; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="flexContainer"> 40 <div class="item1"></div><div class="item3"></div> 41 <div class="item2"></div><div class="item4"></div> 42 </div> 43 <div class="flexContainer"> 44 <div class="item1"></div><div class="item3"></div> 45 <div class="item2"></div><div class="item4"></div> 46 </div> 47 <div class="flexContainer"> 48 <div class="item1"></div><div class="item3"></div> 49 <div class="item2"></div><div class="item4"></div> 50 </div> 51 <div class="flexContainer"> 52 <div class="item1"></div><div class="item3"></div> 53 <div class="item2"></div><div class="item4"></div> 54 </div> 55 </body> 56 </html>