flexbox-baseline-multi-line-horiz-003.html (2240B)
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: Testing the baseline of a horizontal multi-line (wrap) flex container with baseline-aligned items on first line</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/#flex-baselines"> 11 <link rel="match" href="flexbox-baseline-multi-line-horiz-003-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 .flexContainer { 15 display: inline-flex; 16 flex-wrap: wrap; 17 width: 40px; 18 height: 100px; 19 background: lightgray; 20 21 /* Use "align-content", to test that packing space is considered when 22 getting container's baseline from its first FlexLine:*/ 23 align-content: center; 24 } 25 .flexContainer > * { 26 width: 20px; 27 } 28 29 .smallFont { 30 font-size: 8px; 31 line-height: 8px; 32 } 33 .medFont { 34 font-size: 12px; 35 line-height: 12px; 36 } 37 .bigFont { 38 font-size: 16px; 39 line-height: 16px; 40 } 41 </style> 42 </head> 43 <body> 44 a 45 <!-- Flex container with second item in first line baseline-aligned 46 (should set the container's baseline) --> 47 <div class="flexContainer"> 48 <div class="medFont">b</div> 49 <div class="bigFont" style="align-self: baseline">c</div> 50 <div class="medFont">d</div> 51 <div class="smallFont">e</div> 52 </div> 53 54 <!-- Flex container with both items in first line baseline-aligned 55 (should set the container's baseline) --> 56 <div class="flexContainer"> 57 <div class="smallFont" style="align-self: baseline">f</div> 58 <div class="medFont" style="align-self: baseline">g</div> 59 <div class="bigFont">h</div> 60 <div class="smallFont">i</div> 61 </div> 62 63 <!-- Flex container with all items baseline-aligned, and with some padding 64 (only those on first line should set the container's baseline) --> 65 <div class="flexContainer" style="align-items: baseline"> 66 <div class="bigFont">j</div> 67 <div class="smallFont" style="padding-bottom: 20px">k</div> 68 <div class="smallFont">l</div> 69 <div class="medFont">m</div> 70 </div> 71 n 72 </body> 73 </html>