html中flex多列布局是什么

這篇文章主要介紹html中flex多列布局是什么，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元平南做網(wǎng)站,已為上家服務(wù),為平南各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

基本的等分三列布局

.container{
        display: flex;
        width: 500px;
        height: 200px;
    }
    .left{
        flex:1;
        background: red;
    }
    .middle{
        flex:1;
        background: green;
    }
    .right{
        flex:1;
        background: blue;
    }
<div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

三列 左中定寬 右側(cè)自適應(yīng)

    .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;
    }
  <div class="container">
    <div class="left">qqq</div>
    <div class="middle">qqq</div>
    <div class="right">wwww</div>
</div>

縮小瀏覽器窗口后

## 左右固定，中間自適應(yīng) ##

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

縮小瀏覽器窗口后

九宮格布局

        .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;
    }
    <div class="container">
    <div class="row">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
    <div class="row">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
    <div class="row">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</div>

圣杯布局

       *{
        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;
    }
    <div class="container">
    <div class="header">Header</div>
    <div class="content">
        <div class="content-left">Left</div>
        <div class="content-middle">Center</div>
        <div class="content-right">Right</div>
    </div>
    <div class="footer">Footer</div>
</div>

縮小瀏覽器窗口之后

以上是“html中flex多列布局是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：html中flex多列布局是什么
文章轉(zhuǎn)載：http://muchs.cn/article48/iephep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、商城網(wǎng)站、網(wǎng)站內(nèi)鏈、外貿(mào)建站、靜態(tài)網(wǎng)站、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)