flexbox-item-align-self-dynamic-pos-002-ref.html (711B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <title>Reference: dynamic change .left on abs.pos. item w. align-self:end</title> 8 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> 9 <style type="text/css"> 10 html,body { 11 color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; 12 } 13 14 .flexbox { 15 display: flex; 16 position: relative; 17 height: 100px; 18 } 19 20 #item { 21 background: grey; 22 position: relative; 23 align-self: end; 24 left: 20px; 25 } 26 27 </style> 28 </head> 29 <body> 30 31 <div class="flexbox"> 32 <div id="item">X</div> 33 </div> 34 35 </body> 36 </html>