flex-abspos-staticpos-margin-003.html (2789B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Static position of abspos children in a row flex container, with various margins applied, and "align-items: flex-end"</title> 4 <link rel="author" title="Vitaly Dyachkov" href="mailto:obyknovenius@me.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> 6 <link rel="match" href="flex-abspos-staticpos-margin-003-ref.html"> 7 <style> 8 .container { 9 display: flex; 10 flex-flow: row; 11 align-items: flex-end; 12 padding: 1px 2px; 13 border: 1px solid black; 14 background: yellow; 15 margin-bottom: 5px; 16 margin-right: 10px; 17 float: left; /* For testing in "rows" of containers */ 18 } 19 br { clear: both } 20 21 .big > .container { 22 height: 14px; 23 width: 20px; 24 } 25 .small > .container { 26 height: 2px; 27 width: 4px; 28 } 29 30 .container > * { 31 position: absolute; 32 background: teal; 33 height: 6px; 34 width: 8px; 35 } 36 </style> 37 <div class="big"> 38 <!-- Margin just on one side: --> 39 <div class="container"><div style="margin-top: 3px"></div></div> 40 <div class="container"><div style="margin-right: 3px"></div></div> 41 <div class="container"><div style="margin-bottom: 3px"></div></div> 42 <div class="container"><div style="margin-left: 3px"></div></div> 43 <!-- Margin on all sides: --> 44 <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> 45 <br> 46 47 <!-- "auto" margin on just one side (should be treated as 0): --> 48 <div class="container"><div style="margin-top: auto"></div></div> 49 <div class="container"><div style="margin-right: auto"></div></div> 50 <div class="container"><div style="margin-bottom: auto"></div></div> 51 <div class="container"><div style="margin-left: auto"></div></div> 52 <!-- "auto" margin on all sides (should be treated as 0): --> 53 <div class="container"><div style="margin: auto"></div></div> 54 <br> 55 </div> 56 <div class="small"> 57 <!-- Margin just on one side: --> 58 <div class="container"><div style="margin-top: 3px"></div></div> 59 <div class="container"><div style="margin-right: 3px"></div></div> 60 <div class="container"><div style="margin-bottom: 3px"></div></div> 61 <div class="container"><div style="margin-left: 3px"></div></div> 62 <!-- Margin on all sides: --> 63 <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div> 64 <br> 65 66 <!-- "auto" margin on just one side (should be treated as 0): --> 67 <div class="container"><div style="margin-top: auto"></div></div> 68 <div class="container"><div style="margin-right: auto"></div></div> 69 <div class="container"><div style="margin-bottom: auto"></div></div> 70 <div class="container"><div style="margin-left: auto"></div></div> 71 <!-- "auto" margin on all sides (should be treated as 0): --> 72 <div class="container"><div style="margin: auto"></div></div> 73 <br> 74 </div>