flex-gap-decorations-017-ref.html (783B)
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 border: 2px solid rgb(96 139 168); 11 display: flex; 12 row-gap: 20px; 13 width: 50px; 14 height: 190px; 15 flex-wrap: wrap; 16 flex-direction: column; 17 row-rule-color: red; 18 row-rule-width: 20px; 19 row-rule-style: ridge; 20 } 21 22 .items { 23 background-color: rgb(96 139 168 / 0.2); 24 flex-shrink: 1; 25 width: 50px; 26 height: 50px; 27 } 28 29 </style> 30 31 <div id="flexbox"> 32 <div class="items">One</div> 33 <div class="items">Two</div> 34 <div class="items">Three</div> 35 </div>