flex布局踩过的那些坑

刘玉平发布于2019-08-29 11:07 / 2878人阅读

摘要：接下来说说我踩过的那些坑布局版本兼容问题布局自提出之后，变化过好几个版本标志标志标志新增了对项的规定草案阶段兼容方案父级布局不用考虑其他属性都对应相关的版本方案，目前项目中是只写最新的方案，由自动添加兼容方案。

接触H5项目后，开始了解到flex布局，功能非常之强大，用起来相当之舒服。基本的知识介绍就不说了，参考http://www.ruanyifeng.com/blo...。

接下来说说我踩过的那些坑：

1.flex布局版本兼容问题

flex布局自2009提出之后，变化过好几个版本：

**2009** version
标志：**display: box**; 

**2011** version
标志：**display: flexbox**; 

**2012** version
标志：**display: flex/inline-flex**; 

2014 version
新增了对flex项z-index的规定

2015 W3C Editor’s Draft
（草案阶段）

兼容方案：
父级flex布局

display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;  /* OLD - Firefox 19- H5不用考虑 */
display: -mz-flexbox; /* TWEENER IE 10 */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

其他属性都对应相关的版本方案，目前项目中是只写最新的方案，由autoprefixer自动添加兼容方案。

2.关于flex-grow的宽度分配问题

flex-grow属性用于设置或检索弹性盒的扩展比率，默认为0。不允许为负值。
最为常见的用法是用flex-grow实现等比例“tab”布局，举例：


    元素
    元素
    元素
    元素
    元素
    元素

css:

.box {
    display: flex;
    align-items: center;
    padding: 40px 20px;
    color: white;
    background-color: black;
}
.item {
    flex-grow: 1;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border: 1px solid white;
    background-color: #ff0000;
}

不用害怕浮动，不用考虑子元素是块级元素还是行内元素，显示OK~~,不管外面flex父级宽度如何变化，它们都等比分布：~~

纠正一下自己错误的理解，flex-grow是分配flex容器除内容外剩余空间的比例，并不是整个容器的比例[捂脸]，所以出现下面的现象是完全正常的，虽然解决方案可行，但我依然不懂其中的缘由，再次[捂脸]。。。

氮素，“意外”来了：

~~好奇怪，怎么不是等比例显示？大家flex-grow都是1，为什么你要占那么宽？~~
最后找到解决方案，所有flex-grow的子元素加上flex-basis: 0%;就是完全等比分布了，这个属性值会让父级主轴在计算剩余空间时忽略子元素的本身宽度，从而实现等比分配。简单写法就是直接定义flex: 1;不分开定义三个属性。当然如果是那种连串的英文就要设置word-break: break-all;。

3.设置了flex-grow元素的子级宽度问题

来，栗子：


    Hi
    
        
             一个flex-grow为1的元素的子级一个flex-grow为1的元素的子级一个flex-grow    为1的元素的子级一个flex-grow为1的元素的子级

css:

.box {
    display: flex;
    align-items: center;
    padding: 40px 20px;
    color: white;
    background-color: black;
}

.item {
    flex-grow: 1;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #ff0000;
}

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.other {
    flex-shrink: 0;
    display: inline-block;
    width: 150px;
    height: 60px;
    line-height: 60px;
    background-color: orange;
}

大跌眼镜的事就这么发生了，flex-grow元素的子级居然撑破了父级的宽度，超出去了，不知道该怎么解释这种现象：

解决方案就是，flex-grow元素设置overflow: hidden;效果：

最后一个小坑，算不上坑，就是父级设置了flex布局后，子元素就算是行内元素很多浏览器可以把它当做inline-block或者block元素来用，可以直接设置它的宽高，但是还是有些浏览器不支持，所以要设置行内元素的宽度，还是手动设置一下它的display为inline-block或者block.

flex布局非常好用，就是PC兼容性相对较差，IE要10，甚至11以上才有很好的兼容，不过大家可以用它在H5页面好好发挥。

云服务器 GPU云服务器云服务器踩过的坑 flex布局 -坑 cdn坑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111436.html

【echarts3】折线图我踩过的那些坑（tooltip 设置，line 单个点/散点不显示问题

摘要：折线图小技巧折线图功能丰富且官方文档详细易懂，上手比较容易，这篇文章将分享一些项目中踩过的坑，示例主要以多条曲线为主，对大家完成一些曲线和的展示及交互有所帮助基本使用文档写得非常详细清晰，官方示例也很丰富，中还有很多功能更强大的示例篇的是很 echarts 折线图小技巧 echarts 折线图功能丰富且官方文档详细易懂，上手比较容易，这篇文章将分享一些项目中踩过的坑，示例主要以多条曲线...

isaced 2019-08-02 15:58 评论0 收藏0
【echarts3】折线图我踩过的那些坑（tooltip 设置，line 单个点/散点不显示问题

摘要：折线图小技巧折线图功能丰富且官方文档详细易懂，上手比较容易，这篇文章将分享一些项目中踩过的坑，示例主要以多条曲线为主，对大家完成一些曲线和的展示及交互有所帮助基本使用文档写得非常详细清晰，官方示例也很丰富，中还有很多功能更强大的示例篇的是很 echarts 折线图小技巧 echarts 折线图功能丰富且官方文档详细易懂，上手比较容易，这篇文章将分享一些项目中踩过的坑，示例主要以多条曲线...

MonoLog 2019-08-21 17:52 评论0 收藏0
Docker初体验——踩过的那些坑！

摘要：原因其实这个报错不需要下载最新文件，而是文件没有放到正确的位置。重启电脑后按或进入界面不同主板型号进入所需按键不同。端口映射环境下可能不存在这个问题坑在下部署了应用服务并进行了端口映射。 2018‎年‎3‎月‎6‎日 Docker安装环境：windows7 安装包：DockerToolbox-17.10.0-ce.exe （下载地址：http://mirrors.aliyun.co...

Jrain 2019-06-28 17:55 评论0 收藏0
那些年我们踩过的乱码坑

摘要：因此导致乱码的真正原因就是各平台间对标准实现不一致包括实现的时间先后不同，以及所代表含义不同。日本几家公司各自定义了一套标准，用两个字节表示符号，日本电脑系统的一种编码编码是从到。在上找到了与标准的对应关系。欢迎关注个人网站：http://www.iamaddy.net/2016/07/emoji-unicode-parser/ 前言这是一个由乱码引发的故事。抱歉我暂时找不到更加惨...

jhhfft 2019-08-19 18:24 评论0 收藏0