flex幾種多列布局

james 發布于2019-08-02 11:44 / 1035人閱讀

摘要：基本的等分三列布局三列左中定寬右側自適應縮小瀏覽器窗口后左右固定，中間自適應縮小瀏覽器窗口后九宮格布局圣杯布局縮小瀏覽器窗口之后

基本的等分三列布局

.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 多列分組

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53083.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; ...

William_Sang 2019-08-23 12:23 評論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