在CSS中实现多列布局有哪些方法，代码是什么

发布时间：2023-10-03 15:00:15 所属栏目：语言来源：

导读：很多朋友都对“在CSS中实现多列布局有几种方法，代码是什么”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

很多朋友都对“在CSS中实现多列布局有几种方法，代码是什么”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

基本的等分三列布局

.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>

三列左中定宽右侧自适应

    .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>

缩小浏览器窗口后

左右固定，中间自适应

  .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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!