flex-align-baseline-001.html (1719B)
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 flex-direction: column; 8 align-items: last baseline; 9 width: 200px; 10 border: solid 3px; 11 position: relative; 12 } 13 #target > :nth-child(1) { 14 background: lime; 15 margin-right: 20px; 16 padding-right: 20px; 17 font-size: 20px; 18 line-height: 20px; 19 align-self: first baseline; 20 writing-mode: vertical-rl; 21 } 22 #target > :nth-child(2) { 23 background: hotpink; 24 font-size: 30px; 25 line-height: 30px; 26 writing-mode: vertical-lr; 27 } 28 #target > :nth-child(3) { 29 background: papayawhip; 30 font-size: 16px; 31 line-height: 16px; 32 writing-mode: vertical-lr; 33 } 34 #target > :nth-child(4) { 35 background: orange; 36 margin-left: 20px; 37 padding-left: 20px; 38 font-size: 20px; 39 line-height: 20px; 40 align-self: first baseline; 41 writing-mode: vertical-lr; 42 } 43 #target > :nth-child(5) { 44 background: cyan; 45 font-size: 30px; 46 line-height: 30px; 47 writing-mode: vertical-rl; 48 } 49 #target > :nth-child(6) { 50 background: papayawhip; 51 font-size: 16px; 52 line-height: 16px; 53 writing-mode: vertical-rl; 54 } 55 </style> 56 <script src="/resources/testharness.js"></script> 57 <script src="/resources/testharnessreport.js"></script> 58 <script src="/resources/check-layout-th.js"></script> 59 <body onload="checkLayout('#target > div')"> 60 61 <div id="target"> 62 <div data-offset-x="120">line1<br>line2</div> 63 <div data-offset-x="105">line1<br>line2</div> 64 <div data-offset-x="126">line1<br>line2</div> 65 <div data-offset-x="20">line1<br>line2</div> 66 <div data-offset-x="35">line1<br>line2</div> 67 <div data-offset-x="42">line1<br>line2</div> 68 </div>