tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

flex-gap-decorations-009-ref.html (2256B)

      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        column-gap: 10px;
     13        row-gap: 10px;
     14        width: 170px;
     15        flex-wrap: wrap;
     16    }
     17 
     18    .items {
     19        background-color: rgb(96 139 168 / 0.2);
     20        flex-shrink: 1;
     21        width: 50px;
     22        height: 50px;
     23    }
     24 
     25    #four {
     26        width: 100px;
     27    }
     28 
     29    .row-gap {
     30        display: flex;
     31        margin: 0px;
     32        padding: 0px;
     33        height: 10px;
     34        width: 170px;
     35        position: absolute;
     36      column-gap: 10px
     37    }
     38 
     39  .row {
     40    background: blue;
     41    width: 50px;
     42    height: 10px;
     43  }
     44 
     45    .column-gap {
     46        display: flex;
     47        flex-direction: column;
     48        row-gap: 70px;
     49        height: 170px;
     50        top: 2px;
     51        width: 10px;
     52        position: absolute;
     53    }
     54 
     55    .column {
     56        background: red;
     57        width: 10px;
     58        height: 50px;
     59    }
     60 </style>
     61 
     62 <div id="flexbox">
     63    <div class="items">One</div>
     64    <div class="items">Two</div>
     65    <div class="items">Three</div>
     66    <div class="items" id="four">Four</div>
     67    <div class="items">Five</div>
     68    <div class="items">Six</div>
     69    <div class="items">Seven</div>
     70    <div class="items">Eight</div>
     71 </div>
     72 
     73 <div id="columns1" style="left: 52px;" class="column-gap">
     74    <div id="c1" class="column"></div>
     75    <div id="c2" class="column"></div>
     76 </div>
     77 
     78 <div id="columns2" style="left: 112px;" class="column-gap">
     79    <div id="c1" class="column"></div>
     80    <div id="c2" class="column"></div>
     81 </div>
     82 
     83 <div id="columns3" style="left: 102px; position:absolute; top: 62px; height:50px;" class="column"></div>
     84 
     85 <div id="row1" class="row-gap" style="top: 52px; left: 2px;">
     86  <div id="r1" class="row"></div>
     87  <div id="r2" style="width: 40px" class="row"></div>
     88  <div id="r2" style="margin-left: auto" class="row"></div>
     89 </div>
     90 
     91 <div id="row2" class="row-gap" style="top: 112px; left: 2px;">
     92  <div id="r3" class="row"></div>
     93  <div id="r4" style="width: 40px" class="row"></div>
     94  <div id="r5" style="margin-left: auto" class="row"></div>
     95 </div>