<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS Test: A flex container with the 'align-items' property set to 'baseline'</title> <link href="http://www.microsoft.com/" rel="author" title="Microsoft"> <link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help"> <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-align-items" rel="help"> <link href="reference/align-content-001-ref.htm" rel="match"> <meta content="ahem" name="flags"> <meta content="This test checks that the flex container with 'align-items: baseline' places each flex item's margin box so that their baselines align." name="assert"> <style type="text/css"> #flexbox { background: linear-gradient(to bottom, green 0, green 16px, red 16px, red 35px, green 35px, green 66px, red 66px, red 85px, green 85px, green 100px); align-items: flex-start; align-items: baseline; display: flex; flex-flow: wrap; height: 100px; width: 300px; } div div { background-color: green; color: green; font: 20px/1em Ahem; width: 75px; } #div3, #div7 { font-size: 40px; } </style> </head> <body> <p>Test passes if there is no red visible on the page.</p> <div id="flexbox"> <div id="div1">d1</div> <div id="div2">d2</div> <div id="div3">d3</div> <div id="div4">d4</div> <div id="div5">d5</div> <div id="div6">d6</div> <div id="div7">d7</div> <div id="div8">d8</div> </div> </body></html>