13518219792

NEWS

网站建设资讯

html中flex多列布局是什么

这篇文章主要介绍html中flex多列布局是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联于2013年创立，是专业互联网技术服务公司，拥有项目做网站、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元平南做网站,已为上家服务,为平南各地企业和个人服务,联系电话:18982081108

基本的等分三列布局

.container{
        display: flex;
        width: 500px;
        height: 200px;
    }
    .left{
        flex:1;
        background: red;
    }
    .middle{
        flex:1;
        background: green;
    }
    .right{
        flex:1;
        background: blue;
    }

    

    

    

三列 左中定宽 右侧自适应

    .container{
        display: flex;
        height: 300px;
    }
    .left{
        flex: 0 0 100px;
        background-color: red;
    }
    .middle{
        flex: 0 0 100px;
        background-color: green;
    }
    .right{
        flex:1;
        background-color: blue;
    }
  
    qqq
    qqq
    wwww

缩小浏览器窗口后

## 左右固定，中间自适应 ##

       .container{
        display: flex;
        height: 300px;
    }
    .left{
        width: 100px;
        background-color: red;
    }
    .middle{
        flex: 1;
        background-color: green;
    }
    .right{
       width: 100px;
        background-color: blue;
    }
   
    qqq
    qqq
    wwww

缩小浏览器窗口后

九宫格布局

        .container{
        display: flex;
        height: 300px;
        width: 300px;
        flex-direction: column;
    }
    .row{
        display: flex;
        height: 100px;
    }
    .left{
        flex: 1;
        height: 100px;
        border: 1px solid red;
    }
    .middle{
        flex: 1;
        height: 100px;
        border: 1px solid green;
    }
    .right{
        flex: 1;
        height: 100px;
        border: 1px solid blue;
    }
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    

圣杯布局

       *{
        margin:0;
        padding:0;
    }
    .container{
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        justify-content: space-between;
    }
    .header{
        background: red;
        flex: 0 0 100px;
    }
    .content{
        display: flex;
        flex:1;
    }
    .content-left{
        flex: 0 0 100px;
        background: green;
    }
    .content-right{
        flex: 0 0 100px;
        background: pink;
    }
    .content-middle{
        flex:1;
    }
    .footer{
        background: yellow;
        flex: 0 0 100px;
    }
    
    Header
    
        Left
        Center
        Right
    
    Footer

缩小浏览器窗口之后

以上是“html中flex多列布局是什么”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！