flexbox-align-self-baseline-horiz-007-ref.xhtml (1240B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- Reference case for behavior of 'baseline' and 'last baseline' values 7 for align-items and align-self. 8 --> 9 <html xmlns="http://www.w3.org/1999/xhtml"> 10 <head> 11 <title>CSS Reftest Reference</title> 12 <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/> 13 <style> 14 .container { 15 display: flex; 16 border: 1px dashed blue; 17 font: 14px sans-serif; 18 height: 50px; 19 } 20 21 .start { align-self: flex-start; } 22 .end { align-self: flex-end; } 23 24 .offset { margin-top: 10px; 25 margin-bottom: 3px; } 26 27 .lime { background: lime; } 28 .yellow { background: yellow; } 29 .orange { background: orange; } 30 .pink { background: pink; } 31 </style> 32 </head> 33 <body> 34 <div class="container"> 35 <div class="lime offset start">one line (first)</div 36 ><div class="yellow offset end">one line (last)</div 37 ><div class="orange offset end">two<br/>lines and offset (last)</div 38 ><div class="pink offset start">offset (first)</div> 39 </div> 40 </body> 41 </html>