几个CSS3的flex弹性盒模型布局的简单例子演示

    <li><a href="#">3</a></li>  
    <li><a href="#">4</a></li>  
</ul>  

例：移动端常用自适应布局

CSS Code复制内容到剪贴板

<style type="text/css">   
    .wrapper{   
        display:-webkit-box;   
        display:-moz-box;   
        display:-ms-flexbox;   
        display:-webkit-flex;   
        display:flex;     
        -webkit-flex-flow:row wrap;   
        flex-flow:row wrap;   
    }   
    .wrapper > *{   
        padding:10px;   
        flex:1 100%;   
    }   
    .header{   
        background:#FF6347;   
    }   
    .footer{   
        background:#90EE90;   
    }   
    .main{   
        background:#00BFFF;   
    }   
    .aside-1{   
        background:#FFD700;   
    }   
    .aside-2{   
        background:#FF69B4;   
    }   
    @media all and (min-width: 600px) {   
        .aside{   
            flex:1 auto;   
        }   
    }   
    @media all and (min-width: 800px) {   
        .main{   
            flex:3 0px;