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;
    }
<p>
    </p><p></p>
    <p></p>
    <p></p>

三列左中定寬右側自適應

    .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;
    }
  <p>
    </p><p>qqq</p>
    <p>qqq</p>
    <p>wwww</p>

縮小瀏覽器視窗後

## 左右固定，中間自適應

##

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

縮小瀏覽器視窗後

九宮格佈局

    .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;
    }
    <p>
    </p><p>
        </p><p></p>
        <p></p>
        <p></p>
    
    <p>
        </p><p></p>
        <p></p>
        <p></p>
    
    <p>
        </p><p></p>
        <p></p>
        <p></p>
    

聖杯佈局

    *{
        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;
    }
    <p>
    </p><p>Header</p>
    <p>
        </p><p>Left</p>
        <p>Center</p>
        <p>Right</p>
    
    <p>Footer</p>

#縮小瀏覽器視窗之後

總結：以上就是本篇的全部內容，更多相關教學請造訪 CSS基礎影片教學， CSS3影片教學，bootstrap影片教學！

以上是css3學習之flex實現幾種多列佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！