align-items-004.htm (2158B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: A flex container with the 'align-items' property set to 'baseline'</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> 7 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" /> 8 <link rel="match" href="reference/align-content-001-ref.html" /> 9 <meta name="flags" content="ahem"> 10 <meta name="assert" content="This test checks that the flex container with 'align-items: baseline' places each flex item's margin box so that their baselines align." /> 11 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-6405" /> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style type="text/css"> 14 #flexbox 15 { 16 background: linear-gradient(to bottom, green 0, green 16px, red 17px, red 35px, green 36px, green 66px, red 67px, red 85px, green 86px, green 100px); 17 align-items: flex-start; 18 align-items: baseline; 19 display: flex; 20 flex-flow: wrap; 21 height: 100px; 22 width: 300px; 23 } 24 div div 25 { 26 background-color: green; 27 color: green; 28 font: 20px/1em Ahem; 29 width: 75px; 30 } 31 #div3, #div7 32 { 33 font-size: 40px; 34 } 35 </style> 36 </head> 37 <body> 38 <p>Test passes if there is no red visible on the page.</p> 39 <div id="flexbox"> 40 <div id="div1">d1</div> 41 <div id="div2">d2</div> 42 <div id="div3">d3</div> 43 <div id="div4">d4</div> 44 <div id="div5">d5</div> 45 <div id="div6">d6</div> 46 <div id="div7">d7</div> 47 <div id="div8">d8</div> 48 </div> 49 </body> 50 </html>