flex-gap-decorations-008-ref.html (1310B)
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 width: 200px; 19 flex-wrap: nowrap; 20 } 21 22 .items { 23 width: 50px; 24 height: 50px; 25 flex-shrink: 0; 26 } 27 28 .column-gap { 29 display: flex; 30 margin: 0px; 31 padding: 0px; 32 height: 10px; 33 width: 300px; 34 position: absolute; 35 top:2px; 36 height: 50px; 37 left: 52px; 38 column-gap: 50px; 39 } 40 41 .columns { 42 background-color: red; 43 width: 10px; 44 height: 50px; 45 } 46 </style> 47 48 <div id="flexbox"> 49 <div class="items">One</div> 50 <div class="items">Two</div> 51 <div class="items">Three</div> 52 <div class="items">Four</div> 53 <div class="items">Five</div> 54 <div class="items">Six</div> 55 </div> 56 57 <div class="column-gap"> 58 <div class="columns"></div> 59 <div class="columns"></div> 60 <div class="columns"></div> 61 <div class="columns"></div> 62 <div class="columns"></div> 63 </div>