快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

css3中flex实现几种多列布局的案例

三列 左中定宽 右侧自适应
.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

css3中flex实现几种多列布局的案例

缩小浏览器窗口后

css3中flex实现几种多列布局的案例

## 左右固定,中间自适应 ##

.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

css3中flex实现几种多列布局的案例

缩小浏览器窗口后

css3中flex实现几种多列布局的案例

九宫格布局
.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;
    }
    

css3中flex实现几种多列布局的案例

圣杯布局
*{
        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

css3中flex实现几种多列布局的案例

缩小浏览器窗口之后

css3中flex实现几种多列布局的案例

感谢各位的阅读!看完上述内容,你们对css3中flex实现几种多列布局的案例大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联网站制作公司行业资讯频道。


网站名称:css3中flex实现几种多列布局的案例-创新互联
转载来于:http://6mz.cn/article/dsieip.html

其他资讯