tor-browser

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

flex-direction-with-element-insert.html (2369B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <title>CSS Test: flex flow direction</title>
      5 <link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" />
      6 <style>
      7    .flex-container{
      8        display:block;
      9        margin:20px;
     10        background: #333;
     11        line-height: 0px;
     12    }
     13    .flex-item{
     14        display: inline-block;
     15        width:50px;
     16        height:50px;
     17        margin:20px 20px;
     18        background: #eee;
     19        line-height: 50px;
     20        text-align: center;
     21    }
     22 
     23    .flex-container.flex-direction-row{
     24        flex-direction : row;
     25    }
     26    .flex-container.flex-direction-row-reverse{
     27        text-align: right;
     28    }
     29 
     30    .flex-container.flex-direction-column{
     31        padding:20px 0px;
     32    }
     33 
     34    .flex-container.flex-direction-column .flex-item{
     35        display: block;
     36        margin:40px 20px;
     37    }
     38 
     39    .flex-container.flex-direction-column .flex-item.first{
     40        margin-top:0px;
     41    }
     42    .flex-container.flex-direction-column .flex-item.last{
     43        margin-bottom:0px;
     44    }
     45 
     46    .flex-container.flex-direction-column-reverse{
     47        padding:20px 0px;
     48    }
     49 
     50    .flex-container.flex-direction-column-reverse .flex-item{
     51        display: block;
     52        margin:40px 20px;
     53    }
     54 
     55    .flex-container.flex-direction-column-reverse .flex-item.first{
     56        margin-top:0px;
     57    }
     58    .flex-container.flex-direction-column-reverse .flex-item.last{
     59        margin-bottom:0px;
     60    }
     61 </style>
     62 </head>
     63 <body>
     64    <h1>flex-direction:row</h1>
     65    <div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">new</div></div>
     66 
     67    <h1>flex-direction:row-reverse</h1>
     68    <div class="flex-container flex-direction-row-reverse"><div class="flex-item">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div>
     69 
     70    <h1>flex-direction:column</h1>
     71    <div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item last">new</div></div>
     72 
     73    <h1>flex-direction:column-reverse</h1>
     74    <div class="flex-container flex-direction-column-reverse"><div class="flex-item first">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div>
     75 </body>
     76 </html>