flexbox-mbp-horiz-002-ref.xhtml (2156B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head> 8 <title>CSS Reftest Reference</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 10 <style> 11 div { height: 100px; border: 0; } 12 div.flexbox { 13 width: 200px; 14 } 15 div.a { 16 display: inline-block; 17 background: lightgreen; 18 margin-left: 1px; 19 margin-right: 3px; 20 border-style: dotted; 21 border-left-width: 2px; 22 border-right-width: 4px; 23 } 24 div.b { 25 display: inline-block; 26 background: yellow; 27 margin-left: 2px; 28 margin-right: 4px; 29 border-style: dashed; 30 border-left-width: 7px; 31 border-right-width: 3px; 32 } 33 div.c { 34 display: inline-block; 35 background: orange; 36 } 37 div.flexNone { 38 display: inline-block; 39 background: pink; 40 } 41 div.flexBasis { 42 display: inline-block; 43 background: gray; 44 } 45 div.spacer { 46 height: 15px; 47 background: purple; 48 } 49 </style> 50 </head> 51 <body> 52 <div class="flexbox"> 53 <div class="a" style="width: 70px"/><div class="b" style="width: 104px"/> 54 </div> 55 <div class="flexbox"> 56 <div class="a" style="width: 52.5px"/><div class="c" style="width: 137.5px"/> 57 </div> 58 <div class="flexbox"> 59 <div class="a" style="width: 175px"/><div class="flexNone"> 60 <div class="spacer" style="width: 15px"/></div> 61 </div> 62 <div class="flexbox"> 63 <div class="b" style="width: 60px"/><div class="c" style="width: 124px"/> 64 </div> 65 <div class="flexbox"> 66 <div class="b" style="width: 154px"/><div class="flexNone"> 67 <div class="spacer" style="width: 30px"/></div> 68 </div> 69 <div class="flexbox"> 70 <div class="a" style="width: 35px"/><div class="b" style="width: 34px" 71 /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> 72 </div> 73 </body> 74 </html>