flex-gap-decorations-015-ref.html (1514B)
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: 20px; 13 row-gap: 10px; 14 width: 120px; 15 height: 170px; 16 flex-wrap: wrap; 17 flex-direction: column; 18 } 19 20 .items { 21 background-color: rgb(96 139 168 / 0.2); 22 flex-shrink: 1; 23 width: 50px; 24 height: 50px; 25 } 26 27 .row-1 { 28 display: flex; 29 position: absolute; 30 left: 2px; 31 top: 52px; 32 column-gap: 20px; 33 } 34 35 .row-2 { 36 display: flex; 37 position: absolute; 38 left: 2px; 39 top: 112px; 40 column-gap: 20px; 41 } 42 43 .row-gap { 44 height: 10px; 45 width: 50px; 46 background: blue; 47 } 48 </style> 49 50 <div id="flexbox"> 51 <div class="items">One</div> 52 <div class="items">Two</div> 53 <div class="items">Three</div> 54 <div class="items">Four</div> 55 <div class="items">Five</div> 56 <div class="items">Six</div> 57 </div> 58 59 <div class="column-gap" style="top: 2px; height: 170px; position: absolute; width: 20px; left: 52px; background: red;"> 60 </div> 61 62 <div class="row-1"> 63 <div class="row-gap"> 64 </div> 65 <div class="row-gap"> 66 </div> 67 </div> 68 69 <div class="row-2"> 70 <div class="row-gap"> 71 </div> 72 <div class="row-gap"> 73 </div> 74 </div>