flexbox-align-self-horiz-002-ref.xhtml (3147B)
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 align-items / align-self behavior, using floated divs 7 in place of flex items and using relative positioning in place of the 8 align-items / align-self properties. --> 9 <html xmlns="http://www.w3.org/1999/xhtml"> 10 <head> 11 <title>CSS Reftest Reference</title> 12 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> 13 <style> 14 .flexbox { 15 border: 1px dashed blue; 16 height: 200px; 17 display: inline-block; 18 font-size: 10px; 19 line-height: 10px; 20 vertical-align: top; 21 } 22 23 .flexbox > div { float: left } 24 .flex-start, .flex-end, .center, .baseline, .stretch, 25 .auto, .unspecified, .initial, .inherit, .self-start, .self-end { 26 width: 40px; 27 margin: 1px 2px 3px 4px; 28 border-width: 2px 3px 4px 5px; 29 padding: 3px 4px 5px 6px; 30 position: relative; 31 border-style: dotted; 32 } 33 34 .big { 35 height: 100px; 36 font-size: 20px; 37 line-height: 20px; 38 } 39 40 /* Classes for each of the various align-self values */ 41 .flex-start { 42 background: lime; 43 } 44 .flex-end { 45 background: orange; 46 } 47 .center { 48 background: lightblue; 49 } 50 .baseline { 51 background: teal; 52 } 53 .stretch { 54 background: pink; 55 } 56 .self-start { 57 background: yellow; 58 } 59 .self-end { 60 background: purple; 61 } 62 .wmvertrev { 63 writing-mode: vertical-lr; 64 direction: rtl; 65 } 66 </style> 67 </head> 68 <body> 69 <div class="flexbox"> 70 <div class="flex-start">start</div> 71 <div class="flex-start big">a b c d e f</div> 72 <div class="flex-end" style="top: 172px">end</div> 73 <div class="flex-end big" style="top: 82px">a b c d e f</div> 74 <div class="center" style="top: 86px">center</div> 75 <div class="center big" style="top: 41px">a b c d e f</div> 76 </div> 77 <br/> 78 <div class="flexbox"> 79 <!-- We use inline-blocks inside of a wrapper-block as references for the 80 baseline-aligned flex items, since inline-blocks get 81 baseline-aligned in block layout. We also need to specify the widths 82 manually here since the "flexbox > div" child-selector doesn't 83 handle these guys (since they're grandchildren). 84 --> 85 <div> 86 <div class="baseline" 87 style="display: inline-block">base</div 88 ><div class="baseline big" 89 style="display: inline-block">abc</div> 90 </div> 91 <div class="stretch" style="height: 182px">stretch</div> 92 <div class="stretch big">a b c d e f</div> 93 </div> 94 <br/> 95 <div class="flexbox"> 96 <div class="self-start">self-start</div> 97 <div class="self-start big">a b c d e f</div> 98 <div class="self-end wmvertrev">self-end</div> 99 <div class="self-end wmvertrev big">a b c d e f</div> 100 </div> 101 </body> 102 </html>