flex-gap-decorations-029.html (1234B)
1 <!DOCTYPE html> 2 <title> 3 CSS Gap Decorations: Flex gaps are painted with different outsets in start/end segment endpoints. 4 </title> 5 <link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset"> 6 <link rel="match" href="flex-gap-decorations-029-ref.html"> 7 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 8 <style> 9 body { 10 margin: 0px; 11 } 12 .flex { 13 display: flex; 14 flex-wrap: wrap; 15 gap: 20px; 16 left: 0px; 17 top: 0px; 18 width: 340px; 19 column-rule: 3px solid red; 20 row-rule: 3px solid gray; 21 column-rule-break: intersection; 22 column-rule-interior-inset-start: 0; 23 column-rule-interior-inset-end: -5px; 24 column-rule-edge-inset-end: -10px; 25 column-rule-edge-inset-start: 1px; 26 row-rule-break: intersection; 27 row-rule-edge-inset-end: 5px; 28 row-rule-edge-inset-start: 1px; 29 } 30 .item { 31 width: 100px; 32 height: 100px; 33 background: lightgray; 34 } 35 </style> 36 <div class="flex"> 37 <div class="item" style="width: 200px;"></div> 38 <div class="item"></div> 39 <div class="item"></div> 40 <div class="item"></div> 41 <div class="item"></div> 42 </div>