tor-browser

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

summary-display-flex-ref.html (2412B)

      1 <!DOCTYPE html>
      2 <link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com">
      3 <style>
      4 .flex-container {
      5  background: #333;
      6  border: 0px;
      7  display: flex;
      8  margin: 0px;
      9  padding: 0px;
     10 }
     11 
     12 .flex-container.flex-direction-row {
     13  flex-direction : row;
     14 }
     15 
     16 .flex-container.flex-direction-row-reverse {
     17  flex-direction : row-reverse;
     18 }
     19 
     20 .flex-container.flex-direction-column {
     21  flex-direction : column;
     22 }
     23 
     24 .flex-container.flex-direction-column-reverse {
     25  flex-direction : column-reverse;
     26 }
     27 
     28 .flex-container.flex-direction-column-reverse {
     29  flex-direction : column-reverse;
     30 }
     31 
     32 .flex-container.justify-content-center {
     33  justify-content: center;
     34 }
     35 
     36 .flex-container.justify-content-space-around {
     37  justify-content: space-around;
     38 }
     39 
     40 .flex-container.justify-content-space-between {
     41  justify-content: space-between;
     42 }
     43 
     44 .flex-item {
     45  width:50px;
     46  height:50px;
     47  margin:20px;
     48  background: #eee;
     49  line-height: 50px;
     50  text-align: center;
     51 }
     52 </style>
     53 
     54 <summary>
     55  <div>these fieldsshouldn't bestacked vertically</div>
     56 </summary>
     57 
     58 <h1>flex-direction: row</h1>
     59 <div class="flex-container flex-direction-row">
     60  <div class="flex-item">1</div>
     61  <div class="flex-item">2</div>
     62  <div class="flex-item">3</div>
     63 </div>
     64 
     65 <h1>flex-direction: row-reverse</h1>
     66 <div class="flex-container flex-direction-row-reverse">
     67  <div class="flex-item">1</div>
     68  <div class="flex-item">2</div>
     69  <div class="flex-item">3</div>
     70 </div>
     71 
     72 <h1>flex-direction: column</h1>
     73 <div class="flex-container flex-direction-column">
     74  <div class="flex-item">1</div>
     75  <div class="flex-item">2</div>
     76  <div class="flex-item">3</div>
     77 </div>
     78 
     79 <h1>flex-direction: column-reverse</h1>
     80 <div class="flex-container flex-direction-column-reverse">
     81  <div class="flex-item">1</div>
     82  <div class="flex-item">2</div>
     83  <div class="flex-item">3</div>
     84 </div>
     85 
     86 <h1>justify-content: center</h1>
     87 <div class="flex-container justify-content-center">
     88  <div class="flex-item">1</div>
     89  <div class="flex-item">2</div>
     90  <div class="flex-item">3</div>
     91 </div>
     92 
     93 <h1>justify-content: space-around</h1>
     94 <div class="flex-container justify-content-space-around">
     95  <div class="flex-item">1</div>
     96  <div class="flex-item">2</div>
     97  <div class="flex-item">3</div>
     98 </div>
     99 
    100 <h1>justify-content: space-between</h1>
    101 <div class="flex-container justify-content-space-between">
    102  <div class="flex-item">1</div>
    103  <div class="flex-item">2</div>
    104  <div class="flex-item">3</div>
    105 </div>