flex-gap-decorations-006-ref.html (1446B)
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 background-color: rgb(96 139 168 / 0.2); 11 } 12 13 #flexbox { 14 border: 2px solid rgb(96 139 168); 15 border-width: 2px; 16 display: flex; 17 column-gap: 10px; 18 row-gap: 30px; 19 height: 300px; 20 width: 300px; 21 flex-wrap: wrap; 22 align-content: center; 23 writing-mode: vertical-lr; 24 } 25 26 .items { 27 width: 70px; 28 height: 70px; 29 } 30 31 .row-gap { 32 background-color: blue; 33 margin: 0px; 34 padding: 0px; 35 height: 300px; 36 width: 30px; 37 top: 2px; 38 left: 137px; 39 position: absolute; 40 } 41 42 .column-gap { 43 background-color: red; 44 margin: 0px; 45 padding: 0px; 46 height: 10px; 47 width: 170px; 48 left: 67px; 49 position: absolute; 50 } 51 </style> 52 53 <div id="flexbox"> 54 <div class="items">One</div> 55 <div class="items">Two</div> 56 <div class="items">Three</div> 57 <div class="items">Four</div> 58 <div class="items">Five</div> 59 <div class="items">Six</div> 60 </div> 61 62 <div id="column1" class="column-gap" style="top:72px;"></div> 63 <div id="column2" class="column-gap" style="top: 152px;"></div> 64 65 <div id="row1" class="row-gap"></div>