flex-gap-decorations-012-ref.html (1863B)
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 border: 2px solid rgb(96 139 168); 11 display: flex; 12 column-gap: 10px; 13 row-gap: 10px; 14 width: 170px; 15 flex-wrap: wrap; 16 } 17 18 .items { 19 background-color: rgb(96 139 168 / 0.2); 20 flex-shrink: 1; 21 width: 50px; 22 height: 50px; 23 } 24 25 #four { 26 width: 100px; 27 } 28 29 .row-gap { 30 margin: 0px; 31 padding: 0px; 32 height: 2px; 33 background: blue; 34 width: 170px; 35 position: absolute; 36 } 37 38 .column-gap { 39 display: flex; 40 flex-direction: column; 41 row-gap: 60px; 42 height: 174px; 43 top: 2px; 44 width: 10px; 45 position: absolute; 46 } 47 48 .column { 49 background: red; 50 width: 2px; 51 height: 55px; 52 } 53 </style> 54 55 <div id="flexbox"> 56 <div class="items">One</div> 57 <div class="items">Two</div> 58 <div class="items">Three</div> 59 <div class="items" id="four">Four</div> 60 <div class="items">Five</div> 61 <div class="items">Six</div> 62 <div class="items">Seven</div> 63 <div class="items">Eight</div> 64 </div> 65 66 <div id="row1" class="row-gap" style="top: 56px; left: 2px;"></div> 67 <div id="row2" class="row-gap" style="top: 116px; left: 2px;"></div> 68 69 <div id="columns1" style="left: 56px;" class="column-gap"> 70 <div id="c1" class="column"></div> 71 <div id="c2" class="column"></div> 72 </div> 73 74 <div id="columns2" style="left: 116px;" class="column-gap"> 75 <div id="c1" class="column"></div> 76 <div id="c2" class="column"></div> 77 </div> 78 79 <div id="columns3" style="left: 106px; position:absolute; top: 57px; height:60px;" class="column"></div>