zoukankan      html  css  js  c++  java
  • flex 布局示例

      1 <!DOCTYPE html>
      2 <html>
      3 
      4 <head>
      5     <meta charset="utf-8">
      6     <title>flex实例</title>
      7     <style>
      8         * {
      9             font-family: "微软雅黑";
     10         }
     11         
     12         html,
     13         body {
     14             margin: 0;
     15             padding: 0;
     16         }
     17         
     18         h2 {
     19             font-size: 20px;
     20         }
     21         
     22         h3 {
     23             font-size: 18px;
     24             font-weight: normal;
     25         }
     26         
     27         .box {
     28             padding: 20px;
     29             border-bottom: 1px dashed #aaa;
     30         }
     31         
     32         .box:after {
     33             content: "";
     34             display: block;
     35             width: 100%;
     36             line-height: 1px;
     37             clear: both;
     38         }
     39         
     40         .demo {
     41             background: #f1f1f1;
     42             padding: 5px;
     43             box-sizing: border-box;
     44             box-shadow: 5px 5px 10px #ddd;
     45             margin-right: 5%;
     46             margin-bottom: 10px;
     47             width: 45%;
     48             float: left;
     49         }
     50         
     51         .container {
     52             display: -webkit-flex;
     53             display: flex;
     54         }
     55         
     56         .container div:nth-child(1) {
     57             background: #D8614C;
     58         }
     59         
     60         .container div:nth-child(2) {
     61             background: #43BBD2;
     62         }
     63         
     64         .container div:nth-child(3) {
     65             background: #6EC342;
     66         }
     67         
     68         .container div {
     69             min-height: 50px;
     70             color: #fff;
     71             text-align: center;
     72             line-height: 50px;
     73             background: #006699;
     74         }
     75         
     76         .item {
     77             width: 100px;
     78             margin: 0 10px 10px 0;
     79         }
     80     </style>
     81 </head>
     82 
     83 <body>
     84 
     85     <div class="box">
     86         <h2>[flex] 弹性盒模型布局</h2>
     87         <div class="demo">
     88             <h3>display:-webkit-flex;</h3>
     89             <div class="container" style="flex-direction:row;">
     90                 <div style=" 100px;">100px</div>
     91                 <div style="flex: 2;">flex: 2;</div>
     92                 <div style="flex: 1;">flex: 1;</div>
     93             </div>
     94         </div>
     95         <div class="demo">
     96             <h3>display:-webkit-flex;</h3>
     97             <div class="container">
     98                 <div style=" 150px;margin-right:10px;">150px,mright=10</div>
     99                 <div style="flex: 1;">flex: 1;</div>
    100                 <div style=" 150px;margin-left:10px;">150px,mleft=10</div>
    101             </div>
    102         </div>
    103     </div>
    104 
    105 
    106     <div class="box">
    107         <h2>[ flex-direction ] 元素开始方向</h2>
    108         <div class="demo">
    109             <h3>display:-webkit-flex;</h3>
    110             <h3>flex-direction:row /* defalut */;</h3>
    111             <div class="container" style="flex-direction:row;">
    112                 <div style="flex: 3;">flex: 3;</div>
    113                 <div style="flex: 2;">flex: 2;</div>
    114                 <div style="flex: 1;">flex: 1;</div>
    115             </div>
    116         </div>
    117         <div class="demo">
    118             <h3>display:-webkit-flex;</h3>
    119             <h3>flex-direction:row-reverse;</h3>
    120             <div class="container" style="flex-direction:row-reverse;">
    121                 <div style="flex: 3;">flex: 3;</div>
    122                 <div style="flex: 2;">flex: 2;</div>
    123                 <div style="flex: 1;">flex: 1;</div>
    124             </div>
    125         </div>
    126         <div class="demo">
    127             <h3>display:-webkit-flex;</h3>
    128             <h3>flex-direction:column;</h3>
    129             <div class="container" style="flex-direction:column;">
    130                 <div style="flex: 3;">flex: 3;</div>
    131                 <div style="flex: 2;">flex: 2;</div>
    132                 <div style="flex: 1;">flex: 1;</div>
    133             </div>
    134         </div>
    135         <div class="demo">
    136             <h3>display:-webkit-flex;</h3>
    137             <h3>flex-direction:column-reverse;</h3>
    138             <div class="container" style="flex-direction:column-reverse;">
    139                 <div style="flex: 3;">flex: 3;</div>
    140                 <div style="flex: 2;">flex: 2;</div>
    141                 <div style="flex: 1;">flex: 1;</div>
    142             </div>
    143         </div>
    144     </div>
    145 
    146     <!-- 是否换行 -->
    147     <div class="box">
    148         <h2>[ flex-wrap ] 元素是否换行</h2>
    149         <div class="demo">
    150             <h3>display:-webkit-flex;</h3>
    151             <h3>flex-wrap:nowrap; /* default */</h3>
    152             <div class="container" style="-webkit-flex-wrap:nowrap; border:1px dashed #666;">
    153                 <div style=" 100px;">100px</div>
    154                 <div style=" 200px;">200px</div>
    155                 <div style=" 300px;">300px</div>
    156             </div>
    157         </div>
    158         <div class="demo">
    159             <h3>display:-webkit-flex;</h3>
    160             <h3>flex-wrap:wrap; </h3>
    161             <div class="container" style="-webkit-flex-wrap:wrap;border:1px dashed #666;">
    162                 <div style=" 100px;">100px</div>
    163                 <div style=" 200px;">200px</div>
    164                 <div style=" 300px;">300px</div>
    165             </div>
    166         </div>
    167     </div>
    168 
    169     <!-- 横向排版 -->
    170     <div class="box">
    171         <h2>[ justify-content ] 元素横向排版</h2>
    172         <div class="demo">
    173             <h3>display:-webkit-flex;</h3>
    174             <h3>justify-content:flex-start; /* default */</h3>
    175             <div class="container" style="justify-content:flex-start; border:1px dashed #666;">
    176                 <div style=" 100px;">100px</div>
    177                 <div style=" 200px;">200px</div>
    178             </div>
    179         </div>
    180         <div class="demo">
    181             <h3>display:-webkit-flex;</h3>
    182             <h3>justify-content:flex-end; </h3>
    183             <div class="container" style="justify-content:flex-end; border:1px dashed #666;">
    184                 <div style=" 100px;">100px</div>
    185                 <div style=" 200px;">200px</div>
    186             </div>
    187         </div>
    188         <div class="demo">
    189             <h3>display:-webkit-flex;</h3>
    190             <h3>justify-content:center; </h3>
    191             <div class="container" style="justify-content:center; border:1px dashed #666;">
    192                 <div style=" 100px;">100px</div>
    193                 <div style=" 200px;">200px</div>
    194             </div>
    195         </div>
    196         <div class="demo">
    197             <h3>display:-webkit-flex;</h3>
    198             <h3>justify-content:space-between; /* default */</h3>
    199             <div class="container" style="justify-content:space-between; border:1px dashed #666;">
    200                 <div style=" 100px;">100px</div>
    201                 <div style=" 200px;">200px</div>
    202             </div>
    203         </div>
    204         <div class="demo">
    205             <h3>display:-webkit-flex;</h3>
    206             <h3>justify-content:space-around; /* default */</h3>
    207             <div class="container" style="justify-content:space-around; border:1px dashed #666;">
    208                 <div style=" 100px;">100px</div>
    209                 <div style=" 200px;">200px</div>
    210             </div>
    211         </div>
    212     </div>
    213 
    214     <!-- 纵向排版 -->
    215     <div class="box">
    216         <h2>[ align-self ] 元素纵向排版,用在子元素上</h2>
    217         <div class="demo">
    218             <h3>display:-webkit-flex;</h3>
    219             <div class="container" style="height:200px; border:1px dashed #666;">
    220                 <div style="flex:1;align-self: flex-start;">align-self: flex-start;</div>
    221                 <div style="flex:1;align-self: center;">align-self: center;</div>
    222                 <div style="flex:1;align-self: flex-end;">align-self: flex-end;</div>
    223             </div>
    224         </div>
    225         <div class="demo">
    226             <h3>&nbsp;</h3>
    227             <div class="container" style="height:200px; border:1px dashed #666;">
    228                 <div style="flex:1;align-self:auto;">align-self:auto; /*default*/</div>
    229                 <div style="flex:1;align-self: baseline;">align-self: baseline;</div>
    230                 <div style="flex:1;align-self: stretch;">align-self: stretch;</div>
    231             </div>
    232         </div>
    233     </div>
    234 
    235 
    236     <div class="box">
    237         <h2>[ align-items ] 元素纵向排版,用在父元素上</h2>
    238         <div class="demo">
    239             <h3>align-items:flex-start;</h3>
    240             <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-start">
    241                 <div style="flex:1;">1</div>
    242                 <div style="flex:1;">2</div>
    243                 <div style="flex:1;">3</div>
    244             </div>
    245         </div>
    246         <div class="demo">
    247             <h3>align-items:center;</h3>
    248             <div class="container" style="height:200px; border:1px dashed #666;align-items:center">
    249                 <div style="flex:1;">1</div>
    250                 <div style="flex:1;">2</div>
    251                 <div style="flex:1;">3</div>
    252             </div>
    253         </div>
    254         <div class="demo">
    255             <h3>align-items:flex-end;</h3>
    256             <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
    257                 <div style="flex:1;">1</div>
    258                 <div style="flex:1;">2</div>
    259                 <div style="flex:1;">3</div>
    260             </div>
    261         </div>
    262         <div class="demo">
    263             <h3>混合使用</h3>
    264             <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
    265                 <div style="flex:1;">1</div>
    266                 <div style="flex:1; align-self:center">2 align-self:center</div>
    267                 <div style="flex:1;">3</div>
    268             </div>
    269         </div>
    270     </div>
    271 
    272 
    273     <div class="box">
    274         <h2>[ align-content ] 元素分布排版</h2>
    275         <div class="demo">
    276             <h3 style="color:red">与 align-items:flex-start; 对比</h3>
    277             <div class="container" style="height:300px; border:1px dashed #666;align-items:flex-start; flex-wrap: wrap;">
    278                 <div class="item">1</div>
    279                 <div class="item">2</div>
    280                 <div class="item">3</div>
    281                 <div class="item">4</div>
    282                 <div class="item">5</div>
    283                 <div class="item">6</div>
    284                 <div class="item">7</div>
    285                 <div class="item">8</div>
    286                 <div class="item">9</div>
    287                 <div class="item">10</div>
    288                 <div class="item">11</div>
    289             </div>
    290         </div>
    291         <div class="demo">
    292             <h3>align-content:flex-start;</h3>
    293             <div class="container" style="height:300px; border:1px dashed #666;align-content:flex-start; flex-wrap: wrap;">
    294                 <div class="item">1</div>
    295                 <div class="item">2</div>
    296                 <div class="item">3</div>
    297                 <div class="item">4</div>
    298                 <div class="item">5</div>
    299                 <div class="item">6</div>
    300                 <div class="item">7</div>
    301                 <div class="item">8</div>
    302                 <div class="item">9</div>
    303                 <div class="item">10</div>
    304                 <div class="item">11</div>
    305             </div>
    306         </div>
    307         <div class="demo">
    308             <h3>align-content:center;</h3>
    309             <div class="container" style="height:300px; border:1px dashed #666;align-content:center; flex-wrap: wrap;">
    310                 <div class="item">1</div>
    311                 <div class="item">2</div>
    312                 <div class="item">3</div>
    313                 <div class="item">4</div>
    314                 <div class="item">5</div>
    315                 <div class="item">6</div>
    316                 <div class="item">7</div>
    317                 <div class="item">8</div>
    318                 <div class="item">9</div>
    319                 <div class="item">10</div>
    320                 <div class="item">11</div>
    321             </div>
    322         </div>
    323         <div class="demo">
    324             <h3>align-content:flex-end;</h3>
    325             <div class="container" style="height:300px; border:1px dashed #666;align-content:flex-end; flex-wrap: wrap;">
    326                 <div class="item">1</div>
    327                 <div class="item">2</div>
    328                 <div class="item">3</div>
    329                 <div class="item">4</div>
    330                 <div class="item">5</div>
    331                 <div class="item">6</div>
    332                 <div class="item">7</div>
    333                 <div class="item">8</div>
    334                 <div class="item">9</div>
    335                 <div class="item">10</div>
    336                 <div class="item">11</div>
    337             </div>
    338         </div>
    339 
    340         <div class="demo">
    341             <h3>align-content:stretch;</h3>
    342             <div class="container" style="height:300px; border:1px dashed #666;align-content:stretch; flex-wrap: wrap;">
    343                 <div class="item">1</div>
    344                 <div class="item">2</div>
    345                 <div class="item">3</div>
    346                 <div class="item">4</div>
    347                 <div class="item">5</div>
    348                 <div class="item">6</div>
    349                 <div class="item">7</div>
    350                 <div class="item">8</div>
    351                 <div class="item">9</div>
    352                 <div class="item">10</div>
    353                 <div class="item">11</div>
    354             </div>
    355         </div>
    356     </div>
    357 
    358 
    359     <!-- 排序 -->
    360     <div class="box">
    361         <h2>[ order ] 元素排序控制,值越小越靠前</h2>
    362         <div class="demo">
    363             <h3>order:num;</h3>
    364             <div class="container" style="height:200px; border:1px dashed #666;">
    365                 <div class="item" style="order: 1;">1 order:1;</div>
    366                 <div class="item" style="order: 0;">2 order:0;</div>
    367                 <div class="item" style="order: -1;">3 order:-1;</div>
    368                 <div class="item">4</div>
    369                 <div class="item">5</div>
    370             </div>
    371         </div>
    372 </body>
    373 
    374 </html>
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <title>flex实例</title>
    <style>
    * {
    font-family: "微软雅黑";
    }
     
    html,
    body {
    margin: 0;
    padding: 0;
    }
     
    h2 {
    font-size: 20px;
    }
     
    h3 {
    font-size: 18px;
    font-weight: normal;
    }
     
    .box {
    padding: 20px;
    border-bottom: 1px dashed #aaa;
    }
     
    .box:after {
    content: "";
    display: block;
    width: 100%;
    line-height: 1px;
    clear: both;
    }
     
    .demo {
    background: #f1f1f1;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 5px 5px 10px #ddd;
    margin-right: 5%;
    margin-bottom: 10px;
    width: 45%;
    float: left;
    }
     
    .container {
    display: -webkit-flex;
    display: flex;
    }
     
    .container div:nth-child(1) {
    background: #D8614C;
    }
     
    .container div:nth-child(2) {
    background: #43BBD2;
    }
     
    .container div:nth-child(3) {
    background: #6EC342;
    }
     
    .container div {
    min-height: 50px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    background: #006699;
    }
     
    .item {
    width: 100px;
    margin: 0 10px 10px 0;
    }
    </style>
    </head>

    <body>

    <div class="box">
    <h2>[flex] 弹性盒模型布局</h2>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <div class="container" style="flex-direction:row;">
    <div style=" 100px;">100px</div>
    <div style="flex: 2;">flex: 2;</div>
    <div style="flex: 1;">flex: 1;</div>
    </div>
    </div>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <div class="container">
    <div style=" 150px;margin-right:10px;">150px,mright=10</div>
    <div style="flex: 1;">flex: 1;</div>
    <div style=" 150px;margin-left:10px;">150px,mleft=10</div>
    </div>
    </div>
    </div>


    <div class="box">
    <h2>[ flex-direction ] 元素开始方向</h2>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <h3>flex-direction:row /* defalut */;</h3>
    <div class="container" style="flex-direction:row;">
    <div style="flex: 3;">flex: 3;</div>
    <div style="flex: 2;">flex: 2;</div>
    <div style="flex: 1;">flex: 1;</div>
    </div>
    </div>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <h3>flex-direction:row-reverse;</h3>
    <div class="container" style="flex-direction:row-reverse;">
    <div style="flex: 3;">flex: 3;</div>
    <div style="flex: 2;">flex: 2;</div>
    <div style="flex: 1;">flex: 1;</div>
    </div>
    </div>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <h3>flex-direction:column;</h3>
    <div class="container" style="flex-direction:column;">
    <div style="flex: 3;">flex: 3;</div>
    <div style="flex: 2;">flex: 2;</div>
    <div style="flex: 1;">flex: 1;</div>
    </div>
    </div>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <h3>flex-direction:column-reverse;</h3>
    <div class="container" style="flex-direction:column-reverse;">
    <div style="flex: 3;">flex: 3;</div>
    <div style="flex: 2;">flex: 2;</div>
    <div style="flex: 1;">flex: 1;</div>
    </div>
    </div>
    </div>

    <!-- 是否换行 -->
    <div class="box">
    <h2>[ flex-wrap ] 元素是否换行</h2>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <h3>flex-wrap:nowrap; /* default */</h3>
    <div class="container" style="-webkit-flex-wrap:nowrap; border:1px dashed #666;">
    <div style=" 100px;">100px</div>
    <div style=" 200px;">200px</div>
    <div style=" 300px;">300px</div>
    </div>
    </div>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <h3>flex-wrap:wrap; </h3>
    <div class="container" style="-webkit-flex-wrap:wrap;border:1px dashed #666;">
    <div style=" 100px;">100px</div>
    <div style=" 200px;">200px</div>
    <div style=" 300px;">300px</div>
    </div>
    </div>
    </div>

    <!-- 横向排版 -->
    <div class="box">
    <h2>[ justify-content ] 元素横向排版</h2>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <h3>justify-content:flex-start; /* default */</h3>
    <div class="container" style="justify-content:flex-start; border:1px dashed #666;">
    <div style=" 100px;">100px</div>
    <div style=" 200px;">200px</div>
    </div>
    </div>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <h3>justify-content:flex-end; </h3>
    <div class="container" style="justify-content:flex-end; border:1px dashed #666;">
    <div style=" 100px;">100px</div>
    <div style=" 200px;">200px</div>
    </div>
    </div>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <h3>justify-content:center; </h3>
    <div class="container" style="justify-content:center; border:1px dashed #666;">
    <div style=" 100px;">100px</div>
    <div style=" 200px;">200px</div>
    </div>
    </div>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <h3>justify-content:space-between; /* default */</h3>
    <div class="container" style="justify-content:space-between; border:1px dashed #666;">
    <div style=" 100px;">100px</div>
    <div style=" 200px;">200px</div>
    </div>
    </div>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <h3>justify-content:space-around; /* default */</h3>
    <div class="container" style="justify-content:space-around; border:1px dashed #666;">
    <div style=" 100px;">100px</div>
    <div style=" 200px;">200px</div>
    </div>
    </div>
    </div>

    <!-- 纵向排版 -->
    <div class="box">
    <h2>[ align-self ] 元素纵向排版,用在子元素上</h2>
    <div class="demo">
    <h3>display:-webkit-flex;</h3>
    <div class="container" style="height:200px; border:1px dashed #666;">
    <div style="flex:1;align-self: flex-start;">align-self: flex-start;</div>
    <div style="flex:1;align-self: center;">align-self: center;</div>
    <div style="flex:1;align-self: flex-end;">align-self: flex-end;</div>
    </div>
    </div>
    <div class="demo">
    <h3>&nbsp;</h3>
    <div class="container" style="height:200px; border:1px dashed #666;">
    <div style="flex:1;align-self:auto;">align-self:auto; /*default*/</div>
    <div style="flex:1;align-self: baseline;">align-self: baseline;</div>
    <div style="flex:1;align-self: stretch;">align-self: stretch;</div>
    </div>
    </div>
    </div>


    <div class="box">
    <h2>[ align-items ] 元素纵向排版,用在父元素上</h2>
    <div class="demo">
    <h3>align-items:flex-start;</h3>
    <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-start">
    <div style="flex:1;">1</div>
    <div style="flex:1;">2</div>
    <div style="flex:1;">3</div>
    </div>
    </div>
    <div class="demo">
    <h3>align-items:center;</h3>
    <div class="container" style="height:200px; border:1px dashed #666;align-items:center">
    <div style="flex:1;">1</div>
    <div style="flex:1;">2</div>
    <div style="flex:1;">3</div>
    </div>
    </div>
    <div class="demo">
    <h3>align-items:flex-end;</h3>
    <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
    <div style="flex:1;">1</div>
    <div style="flex:1;">2</div>
    <div style="flex:1;">3</div>
    </div>
    </div>
    <div class="demo">
    <h3>混合使用</h3>
    <div class="container" style="height:200px; border:1px dashed #666;align-items:flex-end">
    <div style="flex:1;">1</div>
    <div style="flex:1; align-self:center">2 align-self:center</div>
    <div style="flex:1;">3</div>
    </div>
    </div>
    </div>


    <div class="box">
    <h2>[ align-content ] 元素分布排版</h2>
    <div class="demo">
    <h3 style="color:red">与 align-items:flex-start; 对比</h3>
    <div class="container" style="height:300px; border:1px dashed #666;align-items:flex-start; flex-wrap: wrap;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    </div>
    </div>
    <div class="demo">
    <h3>align-content:flex-start;</h3>
    <div class="container" style="height:300px; border:1px dashed #666;align-content:flex-start; flex-wrap: wrap;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    </div>
    </div>
    <div class="demo">
    <h3>align-content:center;</h3>
    <div class="container" style="height:300px; border:1px dashed #666;align-content:center; flex-wrap: wrap;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    </div>
    </div>
    <div class="demo">
    <h3>align-content:flex-end;</h3>
    <div class="container" style="height:300px; border:1px dashed #666;align-content:flex-end; flex-wrap: wrap;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    </div>
    </div>

    <div class="demo">
    <h3>align-content:stretch;</h3>
    <div class="container" style="height:300px; border:1px dashed #666;align-content:stretch; flex-wrap: wrap;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    </div>
    </div>
    </div>


    <!-- 排序 -->
    <div class="box">
    <h2>[ order ] 元素排序控制,值越小越靠前</h2>
    <div class="demo">
    <h3>order:num;</h3>
    <div class="container" style="height:200px; border:1px dashed #666;">
    <div class="item" style="order: 1;">1 order:1;</div>
    <div class="item" style="order: 0;">2 order:0;</div>
    <div class="item" style="order: -1;">3 order:-1;</div>
    <div class="item">4</div>
    <div class="item">5</div>
    </div>
    </div>
    </body>

    </html>
  • 相关阅读:
    汉诺塔
    协变和逆变随笔
    NetCore开发第一步 Log4Net日志引入
    插入排序算法
    选择排序算法
    冒泡排序算法
    排序算法
    线性链表
    SAN
    SAM -- Chap 8 提升方法 自我梳理
  • 原文地址:https://www.cnblogs.com/cisum/p/7987368.html
Copyright © 2011-2022 走看看