flexbox-baseline-align-self-baseline-horiz-001-ref.html (1330B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- Reference case, using inline-block instead of inline-flex, and with the 7 unaligned children taken out of baseline-alignment with 8 "vertical-align:top". 9 --> 10 <html> 11 <head> 12 <title>CSS Reftest Reference</title> 13 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 14 <meta charset="utf-8"> 15 <style> 16 body { 17 margin: 0; 18 font-size: 20px; 19 line-height: 20px; 20 } 21 .flexContainer { 22 display: inline-block; 23 background: lightblue; 24 vertical-align: top; 25 } 26 .hugeAndUnaligned { 27 font-size: 35px; 28 line-height: 35px; 29 vertical-align: top; 30 } 31 .smallFont { 32 font-size: 10px; 33 line-height: 10px; 34 } 35 .flexContainer > * { display: inline; } 36 </style> 37 </head> 38 <body> 39 a 40 <div class="flexContainer"> 41 <div class="smallFont">b</div 42 ><div>c</div 43 ><div class="hugeAndUnaligned">d</div> 44 </div> 45 <div class="flexContainer"> 46 <div class="hugeAndUnaligned">e</div 47 ><div>f</div 48 ><div class="smallFont">g</div> 49 </div> 50 <div class="flexContainer"> 51 <div class="hugeAndUnaligned">h</div 52 ><div class="smallFont">i</div 53 ><div>j</div> 54 </div> 55 </body> 56 </html>