tor-browser

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

webkit-box-flex-1-ref.html (2132B)

      1 <!DOCTYPE html>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html>
      7 <head>
      8  <title>
      9    CSS Reference
     10  </title>
     11  <style>
     12    .box {
     13      display: flex;
     14      border: 1px solid black;
     15      margin: 5px 20px;
     16      width: 100px;
     17      float: left; /* For testing in "rows" */
     18      font: 10px serif;
     19    }
     20    .box > * {
     21      /* Modern flexbox (used in this reference case) allows everything to
     22         shrink by default, but -webkit-box does not, so we have to turn that
     23         feature off to make an accurate reference case. */
     24      flex-shrink: 0;
     25    }
     26 
     27    .box > *:nth-child(1) { background: turquoise; }
     28    .box > *:nth-child(2) { background: salmon;    }
     29    .box > *:nth-child(3) { background: yellow;    }
     30 
     31    .huge { width: 120px }
     32    .bf1 { flex: 1 1 auto }
     33    .bf3 { flex: 3 3 auto }
     34 
     35    br { clear: both; }
     36  </style>
     37 </head>
     38 <body>
     39  <!-- FIRST ROW: Default -webkit-box-flex -->
     40  <div class="box">
     41    <div>a</div>
     42  </div>
     43 
     44  <div class="box">
     45    <div>a</div><div>b</div>
     46  </div>
     47 
     48  <div class="box">
     49    <div class="huge">a</div>
     50  </div>
     51 
     52  <br>
     53 
     54  <!-- SECOND ROW: One item has nonzero -webkit-box-flex -->
     55  <div class="box">
     56    <div class="bf1">a</div>
     57  </div>
     58 
     59  <div class="box">
     60    <div>a</div><div class="bf1">b</div>
     61  </div>
     62 
     63  <div class="box">
     64    <div class="huge bf1">a</div>
     65  </div>
     66 
     67  <br>
     68 
     69  <!-- THIRD ROW: Two items have nonzero (equal) -webkit-box-flex -->
     70  <div class="box">
     71    <div class="bf1">a</div><div class="bf1">b</div>
     72  </div>
     73 
     74  <div class="box">
     75    <div class="bf1">a</div><div>b</div><div class="bf1">c</div>
     76  </div>
     77 
     78  <div class="box">
     79    <div class="huge bf1">a</div>
     80    <div>b</div>
     81    <div class="huge bf1">c</div>
     82  </div>
     83 
     84  <br>
     85 
     86  <!-- FOURTH ROW: Non-equal nonzero -webkit-box-flex values -->
     87  <div class="box">
     88    <div class="bf1">a</div><div class="bf3">b</div>
     89  </div>
     90 
     91  <div class="box">
     92    <div class="bf3">a</div><div class="bf1">b</div>
     93  </div>
     94 
     95  <div class="box">
     96    <div class="huge bf1">a</div>
     97    <div class="huge bf3">b</div>
     98  </div>
     99 
    100 </body>
    101 </html>