flex-gap-decorations-030-ref.html (1388B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> 3 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 .flex { 9 display: flex; 10 flex-wrap: wrap; 11 gap: 20px; 12 left: 0px; 13 top: 0px; 14 width: 340px; 15 } 16 .item { 17 width: 100px; 18 height: 100px; 19 background: lightgray; 20 } 21 .row-decoration { 22 left: 0px; 23 top: 108.5px; 24 width: 340px; 25 height: 3px; 26 position: absolute; 27 width: 100px; 28 background-color: gray; 29 } 30 .column-decoration { 31 position: absolute; 32 height: 108px; 33 width: 3px; 34 background-color: red; 35 } 36 </style> 37 <div class="row-decoration" style="width: 99px;"></div> 38 <div class="row-decoration" style="left:120px; width: 79px;"></div> 39 <div class="row-decoration" style="left: 240px;"></div> 40 <div class="column-decoration" style="top: 0px; left: 208.5px; height: 106px;"></div> 41 <div class="column-decoration" style="top: 120px; left: 108.5px"></div> 42 <div class="column-decoration" style="top: 120px; left: 228.5px"></div> 43 <div class="flex"> 44 <div class="item" style="width: 200px;"></div> 45 <div class="item"></div> 46 <div class="item"></div> 47 <div class="item"></div> 48 <div class="item"></div> 49 </div>