| <!DOCTYPE html> |
| <title> |
| CSS Gap Decorations: flex column and row gaps are painted in the column-reverse flex direction. |
| </title> |
| <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> |
| <link rel="match" href="flex-gap-decorations-016-ref.html"> |
| <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> |
| <style> |
| body { |
| margin: 0px; |
| } |
| |
| #flexbox { |
| border: 2px solid rgb(96 139 168); |
| display: flex; |
| column-gap: 20px; |
| row-gap: 10px; |
| width: 120px; |
| height: 170px; |
| flex-wrap: wrap; |
| flex-direction: column-reverse; |
| column-rule-style: solid; |
| column-rule-color: red; |
| column-rule-width: 20px; |
| row-rule-style: solid; |
| row-rule-color: blue; |
| row-rule-width: 10px; |
| gap-rule-overlap: column-over-row; |
| } |
| |
| .items { |
| background-color: rgb(96 139 168 / 0.2); |
| flex-shrink: 1; |
| width: 50px; |
| height: 50px; |
| } |
| |
| </style> |
| |
| <div id="flexbox"> |
| <div class="items">One</div> |
| <div class="items">Two</div> |
| <div class="items">Three</div> |
| <div class="items">Four</div> |
| <div class="items">Five</div> |
| <div class="items">Six</div> |
| </div> |
