| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> |
| <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: 10px; |
| row-gap: 10px; |
| width: 170px; |
| flex-wrap: wrap; |
| } |
| |
| .items { |
| background-color: rgb(96 139 168 / 0.2); |
| flex-shrink: 1; |
| width: 50px; |
| height: 50px; |
| } |
| |
| #four { |
| width: 100px; |
| } |
| |
| .row-gap { |
| margin: 0px; |
| padding: 0px; |
| height: 10px; |
| width: 170px; |
| position: absolute; |
| background: blue; |
| } |
| |
| .column-gap { |
| display: flex; |
| flex-direction: column; |
| row-gap: 70px; |
| height: 170px; |
| top: 2px; |
| width: 10px; |
| position: absolute; |
| } |
| |
| .column { |
| background: red; |
| width: 10px; |
| height: 50px; |
| } |
| </style> |
| |
| <div id="flexbox"> |
| <div class="items">One</div> |
| <div class="items">Two</div> |
| <div class="items">Three</div> |
| <div class="items" id="four">Four</div> |
| <div class="items">Five</div> |
| <div class="items">Six</div> |
| <div class="items">Seven</div> |
| <div class="items">Eight</div> |
| </div> |
| |
| <div id="columns1" style="left: 52px;" class="column-gap"> |
| <div id="c1" class="column"></div> |
| <div id="c2" class="column"></div> |
| </div> |
| |
| <div id="columns2" style="left: 112px;" class="column-gap"> |
| <div id="c1" class="column"></div> |
| <div id="c2" class="column"></div> |
| </div> |
| |
| <div id="columns3" style="left: 102px; position:absolute; top: 62px; height:50px;" class="column"></div> |
| |
| <div id="row1" class="row-gap" style="top: 52px; left: 2px;"> |
| </div> |
| |
| <div id="row2" class="row-gap" style="top: 112px; left: 2px;"> |
| </div> |
