flex-gap-decorations-005-ref.html (1866B)
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: 0px; 33 width: 170px; 34 left: 2px; 35 position: absolute; 36 border-bottom: 10px dotted blue; 37 } 38 39 .column-gap { 40 display: flex; 41 flex-direction: column; 42 row-gap: 60px; 43 height: 170px; 44 top: 2px; 45 width: 10px; 46 position: absolute; 47 } 48 49 .column { 50 width: 0px; 51 border-left: 10px dotted red; 52 height: 55px; 53 } 54 </style> 55 56 <div id="flexbox"> 57 <div class="items">One</div> 58 <div class="items">Two</div> 59 <div class="items">Three</div> 60 <div class="items" id="four">Four</div> 61 <div class="items">Five</div> 62 <div class="items">Six</div> 63 <div class="items">Seven</div> 64 <div class="items">Eight</div> 65 </div> 66 67 <div id="columns1" style="left: 52px;" class="column-gap"> 68 <div id="c1" class="column"></div> 69 <div id="c2" class="column"></div> 70 </div> 71 72 <div id="columns2" style="left: 112px;" class="column-gap"> 73 <div id="c1" class="column"></div> 74 <div id="c2" class="column"></div> 75 </div> 76 77 <div id="column3" style="left: 102px; position:absolute; top: 57px; height:60px;" class="column"></div> 78 79 <div class="row-gap" style="top: 52px"></div> 80 <div class="row-gap" style="top: 112px"></div>