资讯专栏INFORMATION COLUMN

flex几种多列布局

William_Sang / 1715人阅读

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

基本的等分三列布局
.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


缩小浏览器窗口之后

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

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

相关文章

  • flex几种多列布局

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

    Tony_Zby 评论0 收藏0
  • flex几种多列布局

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

    james 评论0 收藏0
  • 【整理】CSS布局方案

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

    Winer 评论0 收藏0
  • 总结下常见布局解决方案

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

    newtrek 评论0 收藏0

发表评论

0条评论

William_Sang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<