首页 / CSS / css中flex实现的三列布局

css中flex实现的三列布局

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css中flex实现的三列布局，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含671字，纯文字阅读大概需要1分钟。

内容图文

在开发中，我们经常需要使用到三列布局，即左右元素宽度固定，中间元素自适应。废话不多说，直接上代码：

            <
            div 
            class
            ="box"
            >
            <
            div 
            class
            ="left"
            ></
            div
            >
            <
            div 
            class
            ="center"
            ></
            div
            >
            <
            div 
            class
            ="right"
            ></
            div
            >
            </
            div
            >
            <
            style
            >
            
.box
            {
            
    display
            :
             flex
            ;
            
    height
            :
             60px
            ;
            
    width
            :
             100%
            ;
            
    background-color
            :
             red
            ;
            }
            
.center
            {
            
    flex
            :
             1
            ;
            
    background-color
            :
             yellow
            ;
            }
            
.left,.right
            {
            
    width
            :
             60px
            ;
            
    background-color
            :
             pink
            ;
            }
            </
            style
            >

 相比较之前使用的的浮动（float）和定位（position）代码更加简洁，但是使用flex布局需要考虑到浏览器是兼容性。相关内容参考如下：

关于flex的W3C规范： http://dev.w3.org/csswg/css-flexbox-1/

浏览器兼容性可以参考CanIUse： http://caniuse.com/#feat=flexbox

原文：https://www.cnblogs.com/sloanlv/p/13071053.html

内容总结

以上是互联网集市为您收集整理的css中flex实现的三列布局全部内容，希望文章能够帮你解决css中flex实现的三列布局所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1219548.html

来源：【匿名】