flex-gap-decorations-031-ref.html (1438B)
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 display: flex; 15 column-gap: 10px; 16 row-gap: 30px; 17 height: 130px; 18 width: 230px; 19 flex-wrap: wrap; 20 align-content: center; 21 } 22 23 .items { 24 width: 70px; 25 height: 50px; 26 writing-mode: vertical-rl; 27 } 28 29 .row-rule { 30 position: absolute; 31 height: 30px; 32 width: 70px; 33 background: blue; 34 top: 50px; 35 } 36 37 .col-rule { 38 position: absolute; 39 width: 10px; 40 height: 50px; 41 background: red; 42 } 43 </style> 44 45 <div class="row-rule" style="left: 0px;"></div> 46 <div class="row-rule" style="left: 80px;"></div> 47 <div class="row-rule" style="left: 160px;"></div> 48 49 <div class="col-rule" style="left: 70px;"></div> 50 <div class="col-rule" style="left: 70px; top: 80px;"></div> 51 <div class="col-rule" style="left: 150px;"></div> 52 <div class="col-rule" style="left: 150px; top: 80px;"></div> 53 54 <div id="flexbox"> 55 <div class="items">One</div> 56 <div class="items">Two</div> 57 <div class="items">Three</div> 58 <div class="items">Four</div> 59 <div class="items">Five</div> 60 <div class="items">Six</div> 61 </div>