flex几种多列布局

William_Sang 发布于2019-08-23 12:23 / 1786人阅读

摘要：基本的等分三列布局三列左中定宽右侧自适应缩小浏览器窗口后左右固定，中间自适应缩小浏览器窗口后九宫格布局圣杯布局缩小浏览器窗口之后

基本的等分三列布局

.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

缩小浏览器窗口之后

云服务器 GPU云服务器 flex布局多列数据多列重复数据 extjs 多列分组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98416.html

flex几种多列布局

摘要：基本的等分三列布局三列左中定宽右侧自适应缩小浏览器窗口后左右固定，中间自适应缩小浏览器窗口后九宫格布局圣杯布局缩小浏览器窗口之后基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; ...

Tony_Zby 2019-08-29 17:00 评论0 收藏0
flex几种多列布局

摘要：基本的等分三列布局三列左中定宽右侧自适应缩小浏览器窗口后左右固定，中间自适应缩小浏览器窗口后九宫格布局圣杯布局缩小浏览器窗口之后基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; ...

james 2019-08-02 11:44 评论0 收藏0
【整理】CSS布局方案

摘要：无名布局自己瞎搞的，简单的绝对定位即可解决问题，为啥还要搞什么圣杯和双飞翼如果你觉得此文对你有一定的帮助，可以点击下方的喜欢收藏备用 showImg(https://segmentfault.com/img/remote/1460000010989115); 我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！以下所有demo的源码github：htt...

Winer 2019-08-29 13:20 评论0 收藏0
总结下常见布局解决方案

摘要：总结了几种常见的页面架构布局方案居中布局水平居中垂直居中水平垂直多列布局自适应布局等宽布局等高布局居中布局水平居中水平居中布局垂直居中水平垂直居中多列布局自适应布局定宽自适应总结了几种常见的页面架构布局方案1.居中布局 a.水平居中 b.垂直居中 c.水平垂直 2.多列布局 a.自适应布局 b.等宽布局 c.等高布局居中布局水平居中 demo 1. inline...

newtrek 2019-08-30 15:53 评论0 收藏0