flex-gap-decorations-028-ref.html (1871B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 3 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 #flexbox { 9 border: 2px solid rgb(96 139 168); 10 display: flex; 11 column-gap: 10px; 12 row-gap: 10px; 13 width: 170px; 14 flex-wrap: wrap; 15 } 16 .items { 17 background-color: rgb(96 139 168 / 0.2); 18 flex-shrink: 1; 19 width: 50px; 20 height: 50px; 21 } 22 #four { 23 width: 100px; 24 padding-inline-start: 20px; 25 } 26 .row-gap { 27 margin: 0px; 28 padding: 0px; 29 height: 10px; 30 width: 170px; 31 position: absolute; 32 background: blue; 33 } 34 .column-gap { 35 display: flex; 36 flex-direction: column; 37 row-gap: 70px; 38 height: 170px; 39 top: 2px; 40 width: 10px; 41 position: absolute; 42 } 43 .column { 44 background: red; 45 width: 10px; 46 height: 50px; 47 } 48 </style> 49 <div id="flexbox"> 50 <div class="items">One</div> 51 <div class="items">Two</div> 52 <div class="items">Three</div> 53 <div class="items" id="four">Four</div> 54 <div class="items">Five</div> 55 <div class="items">Six</div> 56 <div class="items">Seven</div> 57 <div class="items">Eight</div> 58 </div> 59 60 <div id="columns1" style="left: 52px;" class="column-gap"> 61 <div id="c1" class="column"></div> 62 <div id="c2" class="column"></div> 63 </div> 64 65 <div id="columns2" style="left: 112px;" class="column-gap"> 66 <div id="c1" class="column"></div> 67 <div id="c2" class="column"></div> 68 </div> 69 70 <div id="row1" class="row-gap" style="top: 52px; left: 2px;"> 71 </div> 72 73 <div id="row2" class="row-gap" style="top: 112px; left: 2px;"> 74 </div> 75 76 <div id="row3" class="row-gap" style="top: 172px; left: 2px;"> 77 </div>