css3中flex实现几种多列布局的案例-创新互联

css3中flex实现几种多列布局的案例？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

青岛网站建设公司创新互联,青岛网站设计制作，有大型网站制作公司丰富经验。已为青岛成百上千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的青岛做网站的公司定做！基本的等分三列布局

.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

缩小浏览器窗口之后

感谢各位的阅读！看完上述内容，你们对css3中flex实现几种多列布局的案例大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联网站制作公司行业资讯频道。

本文标题：css3中flex实现几种多列布局的案例-创新互联
本文URL：http://cdxtjz.cn/article/dsieip.html