flex-gap-decorations-023.html (1550B)
1 <!DOCTYPE html> 2 <title> 3 CSS Gap Decorations: flex gaps are painted when going from no gap rule to a gap rule that would be visible. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 6 <link rel="match" href="../agnostic/gap-decorations-006-ref.html"> 7 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 8 <style> 9 body { 10 margin: 0px; 11 } 12 13 .flex-container { 14 height: 110px; 15 width: 110px; 16 17 display: flex; 18 19 column-gap: 10px; 20 row-gap: 10px; 21 22 flex-wrap: wrap; 23 } 24 25 .flex-item { 26 background: skyblue; 27 width: 50px; 28 } 29 </style> 30 <script> 31 function setup() { 32 const button = document.getElementById('btn'); 33 button.click(); 34 } 35 36 function setDecorations() { 37 const container = document.querySelector('.flex-container'); 38 if (container) { 39 container.style.columnRuleStyle = 'solid'; 40 container.style.columnRuleWidth = '10px'; 41 container.style.columnRuleColor = 'pink'; 42 container.style.rowRuleStyle = 'solid'; 43 container.style.rowRuleWidth = '10px'; 44 container.style.rowRuleColor = 'green'; 45 } 46 } 47 </script> 48 49 <body onload="setup()"> 50 <div class="flex-container"> 51 <div class="flex-item"></div> 52 <div class="flex-item"></div> 53 <div class="flex-item"></div> 54 <div class="flex-item"></div> 55 </div> 56 <button onclick="setDecorations()" id="btn">Set decorations</button> 57 </body>