flex-gap-decorations-007-ref.html (1069B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 3 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 9 #flexbox>* { 10 background-color: rgb(96 139 168 / 0.2); 11 } 12 13 #flexbox { 14 border: 2px solid rgb(96 139 168); 15 border-width: 2px; 16 display: flex; 17 column-gap: 10px; 18 width: 170px; 19 flex-wrap: wrap; 20 align-items: flex-end; 21 } 22 23 .items { 24 width: 50px; 25 } 26 27 .column-gap { 28 background-color: red; 29 margin: 0px; 30 padding: 0px; 31 height: 10px; 32 width: 10px; 33 position: absolute; 34 top:2px; 35 height: 40px; 36 } 37 38 #three { 39 height: 40px; 40 } 41 </style> 42 43 <div id="flexbox"> 44 <div class="items">One</div> 45 <div class="items">Two</div> 46 <div class="items" id="three">Three</div> 47 </div> 48 49 <div id="column1" class="column-gap" style="left: 52px;"></div> 50 <div id="column2" class="column-gap" style="left: 112px;"></div>