flex-abspos-staticpos-margin-003-ref.html (2523B)
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" reference</title> 4 <style> 5 .container { 6 display: block; 7 padding: 1px 2px; 8 border: 1px solid black; 9 background: yellow; 10 margin-bottom: 5px; 11 margin-right: 10px; 12 float: left; /* For testing in "rows" of containers */ 13 } 14 br { clear: both } 15 16 .big > .container { 17 height: 14px; 18 width: 20px; 19 } 20 .small > .container { 21 height: 2px; 22 width: 4px; 23 } 24 25 .container > * { 26 background: teal; 27 height: 6px; 28 width: 8px; 29 } 30 </style> 31 <div class="big"> 32 <!-- Margin just on one side: --> 33 <div class="container"><div style="margin: 8px 0 0 0"></div></div> 34 <div class="container"><div style="margin: 8px 0 0 0"></div></div> 35 <div class="container"><div style="margin: 5px 0 0 0"></div></div> 36 <div class="container"><div style="margin: 8px 0 0 3px"></div></div> 37 <!-- Margin on all sides: --> 38 <div class="container"><div style="margin: 5px 0 0 4px"></div></div> 39 <br> 40 41 <!-- "auto" margin on just one side (should be treated as 0): --> 42 <div class="container"><div style="margin: 8px 0 0 0"></div></div> 43 <div class="container"><div style="margin: 8px 0 0 0"></div></div> 44 <div class="container"><div style="margin: 8px 0 0 0"></div></div> 45 <div class="container"><div style="margin: 8px 0 0 0"></div></div> 46 <!-- "auto" margin on all sides (should be treated as 0): --> 47 <div class="container"><div style="margin: 8px 0 0 0"></div></div> 48 <br> 49 </div> 50 <div class="small"> 51 <!-- Margin just on one side: --> 52 <div class="container"><div style="margin: -4px 0 0 0"></div></div> 53 <div class="container"><div style="margin: -4px 0 0 0"></div></div> 54 <div class="container"><div style="margin: -7px 0 0 0"></div></div> 55 <div class="container"><div style="margin: -4px 0 0 3px"></div></div> 56 <!-- Margin on all sides: --> 57 <div class="container"><div style="margin: -7px 0 0 4px"></div></div> 58 <br> 59 60 <!-- "auto" margin on just one side (should be treated as 0): --> 61 <div class="container"><div style="margin: -4px 0 0 0"></div></div> 62 <div class="container"><div style="margin: -4px 0 0 0"></div></div> 63 <div class="container"><div style="margin: -4px 0 0 0"></div></div> 64 <div class="container"><div style="margin: -4px 0 0 0"></div></div> 65 <!-- "auto" margin on all sides (should be treated as 0): --> 66 <div class="container"><div style="margin: -4px 0 0 0"></div></div> 67 <br> 68 </div>