tor-browser

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

flexbox-flex-wrap-horiz-001.html (2971B)

      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>CSS Test: Testing flex-wrap in horizontal flex containers</title>
      9  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     10  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
     11  <link rel="match" href="flexbox-flex-wrap-horiz-001-ref.html">
     12  <meta charset="utf-8">
     13  <style>
     14    div.flexbox {
     15      display: flex;
     16      flex-wrap: wrap;
     17      border: 1px dashed black;
     18      width: 100px;
     19      height: 12px;
     20      margin-bottom: 2px;
     21    }
     22    div.halfMainSize {
     23      width: 48px;
     24      border: 1px solid blue;
     25      background: lightblue;
     26    }
     27    div.hugeMainSize {
     28      width: 148px;
     29      border: 1px solid purple;
     30      background: fuchsia;
     31    }
     32  </style>
     33 </head>
     34 <body>
     35 
     36  <!-- Single small flex item -->
     37  <div class="flexbox">
     38    <div class="halfMainSize"></div>
     39  </div>
     40 
     41  <!-- Single small flex item with 'margin-left' set to push it to protrude
     42       from the far edge of the container (and to shrink as a result) -->
     43  <div class="flexbox">
     44    <div class="halfMainSize" style="margin-left: 80px"></div>
     45  </div>
     46 
     47  <!-- Single small inflexible flex item with 'margin-left' set to push it to
     48       protrude from the far edge of the container -->
     49  <div class="flexbox">
     50    <div class="halfMainSize" style="margin-left: 80px; flex: none"></div>
     51  </div>
     52 
     53  <!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
     54  <div class="flexbox">
     55    <div class="halfMainSize"></div>
     56    <div class="halfMainSize"></div>
     57  </div>
     58 
     59  <!-- and now with some margin on first item, to force second item to wrap: -->
     60  <div class="flexbox">
     61    <div class="halfMainSize" style="margin-right: 1px"></div>
     62    <div class="halfMainSize"></div>
     63  </div>
     64 
     65  <!-- and now with some margin on second item, again forcing it to wrap: -->
     66  <div class="flexbox">
     67    <div class="halfMainSize"></div>
     68    <div class="halfMainSize" style="margin-right: 1px"></div>
     69  </div>
     70 
     71  <!-- Single large flex item: overflows (but does not wrap) and is shrunk
     72       to fit container's main-size -->
     73  <div class="flexbox">
     74    <div class="hugeMainSize"></div>
     75  </div>
     76 
     77  <!-- Single large flex item: overflows (but does not wrap) -->
     78  <div class="flexbox">
     79    <div class="hugeMainSize" style="flex: none"></div>
     80  </div>
     81 
     82  <!-- Small flex item, followed by large flex item (which wraps to
     83       its own line and then shrink to container's main-size) -->
     84  <div class="flexbox">
     85    <div class="halfMainSize"></div>
     86    <div class="hugeMainSize"></div>
     87  </div>
     88 
     89  <!-- Small flex item, followed by large inflexible flex item (which wraps to
     90       its own line and then shrink to container's main-size) -->
     91  <div class="flexbox">
     92    <div class="halfMainSize"></div>
     93    <div class="hugeMainSize" style="flex: none"></div>
     94  </div>
     95 
     96 </body>
     97 </html>