tor-browser

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

flexible-order.html (948B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head><title>CSS Test: Change the value of 'order' property</title>
      4 
      5 <meta name="assert" content="The order of three should be blue-red-black" />
      6 
      7 <link rel="match" href="reference/flexible-order-ref.html">
      8 <link rel="author" title="KeynesQu" href="mailto:keynesqu@sohu.com" />
      9 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#order-property" />
     10 
     11 <style>
     12 
     13 .box {
     14 margin:0 auto;
     15 background:#CCC;
     16 border-radius:5px;
     17 width:600px;
     18 display:flex;
     19 flex-flow:row;
     20 }
     21 
     22 .box div {
     23 text-align:center;
     24 }
     25 
     26 .box .red {
     27 order:-2;
     28 flex:0 1 auto;
     29 width:200px;
     30 background:#F00;
     31 }
     32 .box .blue {
     33 order:-4;
     34 flex:0 1 auto;
     35 width:200px;
     36 background:#00F;
     37 }
     38 .box .black {
     39 order:-1;
     40 flex:0 1 auto;
     41 width:200px;
     42 background:#000;
     43 color:#FFF;
     44 }
     45 
     46 
     47 
     48 
     49 </style>
     50 
     51 </head>
     52 
     53 <body>
     54 
     55 
     56 <!-- FLEX CONTAINER -->
     57 <div class="box">
     58 <div class="red">A</div>
     59 <div class="blue">B</div>
     60 <div class="black">C</div>
     61 </div>
     62 
     63 
     64 
     65 </body>
     66 </html>