tor-browser

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

flexbox-column-row-gap-001-ref.html (2312B)

      1 <!DOCTYPE html>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0
      5 -->
      6 <!--
      7     Reference for the correctness of gaps in horizontal and vertical multi-line
      8     flex containers.
      9 -->
     10 <html>
     11 <head>
     12  <title>Reference: Testing row and column gaps in horizontal and vertical multi-line flex containers with the space-around property and auto margins</title>
     13  <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
     14  <meta charset="utf-8">
     15  <style>
     16    .outerBox {
     17      width: 200px;
     18      height: 220px;
     19      border: 1px solid black;
     20      float: left;
     21    }
     22    .flexContainer {
     23      display: flex;
     24      align-content: space-around;
     25      justify-content: space-around;
     26    }
     27    .rowNoWrap {
     28      flex-flow: row nowrap;
     29    }
     30    .columnNoWrap {
     31      flex-flow: column nowrap;
     32    }
     33    .item {
     34      border: 1px solid blue;
     35      background: lightblue;
     36      width: 28px;
     37      height: 28px;
     38    }
     39    .autoLBMargins {
     40      margin-left: auto;
     41      margin-bottom: auto;
     42    }
     43    .autoBMargin {
     44      margin-bottom: auto;
     45    }
     46    .right20 {
     47      margin-right: 20px;
     48    }
     49    .bottom40 {
     50      margin-bottom: 40px;
     51    }
     52    .tb30100 {
     53      margin-top: 30px;
     54      margin-bottom: 100px;
     55    }
     56    .lr3080 {
     57      margin-left: 30px;
     58      margin-right: 80px;
     59    }
     60    .w200 {
     61      width: 200px;
     62    }
     63    .h220 {
     64      height: 220px;
     65    }
     66    .fleft {
     67      float: left;
     68    }
     69  </style>
     70 </head>
     71 <body>
     72  <div class="outerBox">
     73    <div class="flexContainer w200 rowNoWrap tb30100">
     74      <div class="item right20"></div>
     75      <div class="item right20"></div>
     76      <div class="item right20"></div>
     77      <div class="item"></div>
     78    </div>
     79    <div class="flexContainer w200 rowNoWrap">
     80      <div class="item autoLBMargins right20"></div>
     81      <div class="item"></div>
     82    </div>
     83  </div>
     84  <div class="outerBox">
     85    <div class="flexContainer fleft h220 columnNoWrap lr3080">
     86      <div class="item bottom40"></div>
     87      <div class="item bottom40"></div>
     88      <div class="item"></div>
     89    </div>
     90    <div class="flexContainer fleft  h220 columnNoWrap">
     91      <div class="item bottom40"></div>
     92      <div class="item bottom40"></div>
     93      <div class="item autoBMargin"></div>
     94    </div>
     95  </div>
     96 </body>
     97 </html>