tor-browser

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

flexbox-align-self-baseline-horiz-003.xhtml (2424B)

      1 <?xml version="1.0" encoding="UTF-8"?>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <!-- Testcase for how a baseline-aligned flex item's position is impacted by
      7     cross-axis margins, in a fixed-size flex container with the cross axis
      8     reversed via "flex-wrap: wrap-reverse".
      9  -->
     10 <html xmlns="http://www.w3.org/1999/xhtml">
     11  <head>
     12    <title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container, with cross axis reversed</title>
     13    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     14    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
     15    <link rel="match" href="flexbox-align-self-baseline-horiz-003-ref.xhtml"/>
     16    <style>
     17      .flexbox {
     18        display: flex;
     19        align-items: baseline;
     20        flex-wrap: wrap-reverse; /* Just to flip cross-axis */
     21        width: 40px;
     22        height: 40px;
     23        border: 1px solid gray;
     24        margin: 5px; /* just for visual separation */
     25        float: left;
     26      }
     27 
     28      .flexbox > * {
     29        background: yellow;
     30        border: 1px solid black;
     31        height: 20px;
     32        flex: 1;
     33      }
     34   </style>
     35  </head>
     36  <body>
     37    <!-- ZEROTH ROW: NO MARGINS -->
     38    <!-- No margins on flex item: -->
     39    <div class="flexbox">
     40      <div>a</div>
     41    </div>
     42 
     43 
     44    <!-- FIRST ROW: SETTING MARGIN-TOP: -->
     45    <br style="clear: both"/>
     46 
     47    <!-- auto: -->
     48    <div class="flexbox">
     49      <div style="margin-top: auto">a</div>
     50    </div>
     51 
     52    <!-- Negative: -->
     53    <div class="flexbox">
     54      <div style="margin-top: -4px">a</div>
     55    </div>
     56 
     57    <!-- Small: -->
     58    <div class="flexbox">
     59      <div style="margin-top: 4px">a</div>
     60    </div>
     61 
     62    <!-- Large (pushing us out of container): -->
     63    <div class="flexbox">
     64      <div style="margin-top: 25px">a</div>
     65    </div>
     66 
     67 
     68    <!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
     69    <br style="clear: both"/>
     70 
     71    <!-- auto: -->
     72    <div class="flexbox">
     73      <div style="margin-bottom: auto">a</div>
     74    </div>
     75 
     76    <!-- Negative: -->
     77    <div class="flexbox">
     78      <div style="margin-bottom: -4px">a</div>
     79    </div>
     80 
     81    <!-- Small: -->
     82    <div class="flexbox">
     83      <div style="margin-bottom: 4px">a</div>
     84    </div>
     85 
     86    <!-- Large: -->
     87    <div class="flexbox">
     88      <div style="margin-bottom: 25px">a</div>
     89    </div>
     90 
     91  </body>
     92 </html>