flexbox-baseline-multi-line-horiz-002-ref.html (1568B)
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 baseline-aligned items aligned using specific font-size / line-heights, 8 and with unaligned children taken out of baseline-alignment using 9 "vertical-align:top". 10 --> 11 <html> 12 <head> 13 <title>CSS Reftest Reference</title> 14 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 15 <meta charset="utf-8"> 16 <style> 17 .flexContainer { 18 display: inline-block; 19 width: 40px; 20 /* Split testcase's 40px height into 20px of padding-bottom and 20px of 21 height, to set aside space for the testcase's (invisible) second line. */ 22 height: 20px; 23 padding-bottom: 20px; 24 background: lightblue; 25 } 26 .flexContainer > * { 27 width: 20px; 28 display: inline-block; 29 } 30 31 .smallFont { 32 font-size: 8px; 33 line-height: 8px; 34 } 35 .medFont { 36 font-size: 12px; 37 line-height: 12px; 38 } 39 .bigFont { 40 font-size: 16px; 41 line-height: 16px; 42 } 43 .unaligned { vertical-align: top } 44 </style> 45 </head> 46 <body> 47 a 48 <!-- Flex containers with flex items that have a mix of baselines: --> 49 <div class="flexContainer medFont"> 50 <div class="bigFont">d</div 51 ><div class="medFont unaligned">e</div> 52 </div> 53 54 <div class="flexContainer bigFont"> 55 <div class="bigFont">h</div 56 ><div class="medFont unaligned">i</div> 57 </div> 58 n 59 60 </body> 61 </html>