flex-align-baseline-005.html (1189B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#cross-alignment"> 4 <style> 5 #target { 6 display: flex; 7 align-items: last baseline; 8 width: 200px; 9 border: solid 3px; 10 position: relative; 11 line-height: 0; 12 } 13 span { 14 display: inline-block; 15 width: 1em; 16 height: 1em; 17 outline: solid cornflowerblue 3px; 18 outline-offset: -3px; 19 } 20 #target > div { 21 flex: none; 22 } 23 #target > :nth-child(1) { 24 background: lime; 25 margin-bottom: 20px; 26 padding-bottom: 20px; 27 font-size: 20px; 28 } 29 #target > :nth-child(2) { 30 background: hotpink; 31 font-size: 30px; 32 } 33 #target > :nth-child(3) { 34 background: papayawhip; 35 font-size: 10px; 36 writing-mode: vertical-lr; 37 } 38 </style> 39 <script src="/resources/testharness.js"></script> 40 <script src="/resources/testharnessreport.js"></script> 41 <script src="/resources/check-layout-th.js"></script> 42 <body onload="checkLayout('#target > div')"> 43 44 <div id="target"> 45 <div data-offset-y="20"><span></span><br><span></span></div> 46 <div data-offset-y="0"><span></span><br><span></span></div> 47 <div data-offset-y="50"><span></span><br><span></span></div> 48 </div>