flex布局精髓和填坑

说到flex布局，大家可能并不陌生。对于基本概念，大家应该也有所了解。这里可以推荐我看过的认为比较通俗易懂的博客，它就是阮一峰老师的flex布局博客，感谢阮一峰老师的无私分享。

那么，了解过基本概念后。对于Flex布局我们常见的几个误区和经常遇到的所谓的坑是什么呢？这里，兼容性问题我就不讲了，不是本次博客的主要内容。下面我主要想讲讲flex布局使用的几个误区和常遇到的问题。

1. Flex属性的写法

　　首先我们知道 flex: <number> <number> <length/percentage/cale> 实际上是flex-grow, flex-shrink, flex-basis三个属性的缩写。

flex: flex-grow flex-shrink flex-basis

　　那么这三个属性的初始值是什么呢？

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto; 根据内容大小分配

　　根据上面的基础认知，下面我们介绍flex属性的几种常见写法及解析

内置值写法flex: auto; 等价于 flex: 1 1 auto; 元素会根据自身的宽度与高度来确定尺寸，但是会自行伸长以吸收flex容器中额外的自由空间，也会缩短至自身最小尺寸以适应容器.flex: initial; 等价于 flex: 0 1 auto; 元素会根据自身宽高设置尺寸。它会缩短自身以适应容器，但不会伸长并吸收flex容器中的额外自由空间来适应容器.flex: none; 等价于 flex: 0 0 auto; 元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应flex容器

单值法 One value, unitless number: flex-grow flex: <positive-number>; 等价于 flex: <positive-number> 1 0;

单值法One value, unit number: flex-basisflex: <unit-number>; 等价于 flex: 0 1 <unit-number>;元素有一个自定义的主轴上的宽度/高度 （单值法）双值法第一个值必须是无符号的 flex-grow | flex-shrinkflex: <positive-number> <positive-number>; 等价于 flex: <positive-number> <positive-number> 0;双值法 第一个值必须是无符号的 flex-grow | flex-basisflex: <positive-number> <unit-number/percentage/calc()> 等价于 flex: <positive-number> 1 <unit-number/percentage/calc()>三值法flex: <positive-number> <positive-number> <unit-number/percentage/calc()>

2. flex-grow: 1 真的是等比分配吗？？？？

　　如下例子是我们所认为的平均分配吗？

    <div id="main" style="width: 1000px; height:200px;"><div style="background-color:coral;">First</div><div style="background-color:lightblue;">Second  I am long long long long long long long long long long long</div><div style="background-color:khaki;">Third</div><div style="background-color:pink;">Forth</div><div style="background-color:lightgrey;">Fifth</div></div>

    #main {display: flex;div {flex-grow: 1;    是等比分配吗？请看运行结果}}

　　运行结果：觉得奇怪吗？明明对每个div设置的都是 flex-grow: 1; 那么，他们为什么不是等比分配，全部是200px宽呢？？？这里就需要我们回到上面定义的地方从新理解一下flex-grow的含义。请注意 flex-grow的含义，通俗的讲，是按用户定义的比例去分配父元素剩余的空闲空间（除去子元素本身所占的空间之后剩余的空间）。这个地方通常是我们的误区之一。认为只要设了等比例分配，那么flex布局就会按等比例去分配。no no no.

　　那么，怎么解决这个问题呢？其实再重新回到上面黄色部分的定义仔细读几遍，我们就会发现，问题实际上出在每个子元素本身所占的空间是不一样的，这才导致最终分配的全占比是不一样的。子元素的宽度 = 子元素本身的宽度 + 剩余空间的配比。上面的案例，其实剩余空间的配比是相等的，只是子元素原始本身的宽度不等，导致最终宽度是非等比例的。好的，知道问题就好解决了。我们让flex布局在分配空间时忽略子元素本身的占比就可以了，这里我们肯定会想到属性 flex-basis，它就是控制子元素本身占比的，那么我们设置它为 flex-basis: 0%;

    #main {display: flex;div {flex-grow: 1;flex-basis: 0%;}}

再次测试一下：

ok, 很完美的解决了。我们上面的那种写法是将flex-grow flex-shrink flex-basis 分开写的情况。根据上面单值写法的解析，其实我们直接写成 flex: 1; 就不会出现上述问题。因为 flex: 1; 等价于 flex: 1 1 0;

flex-shink 属性在使用时也有和flex-grow 属性相同的需要注意的点。

下面谈这个案例中另一个需要解决的问题，当一个完整的单词很长的话，如果只忽略子元素的原始大小还不太好用。依旧达不到等比分配的效果。如下

这时需要多加一个属性设置 word-break: break-all/break-word; 就解决了

3. flex 和 width的坑

项目中遇到一个问题。利用了flex布局的元素，当该元素内部的子元素内容超过flex分配的空间后，flex分配比例失效。

<div class="view-list-item" [class.hyphens-words]="showHyphens"><div>{{ impact.currentState }}</div></div>
<div class="view-list-item" [class.hyphens-words]="showHyphens"><div>{{ impact.futureStateName }}</div></div>
<div class="view-list-item" [class.hyphens-words]="showHyphens"><div>{{ impact.changeDelta }}</div></div>

                      &:nth-child(3), &:nth-child(4), &:nth-child(5) {flex: 9;padding-right: 0px;> div {max-height: rem(60px);padding-right: rem(10px);overflow-y: auto;width: 100%;}}

解决方法：在父的flex元素上设置 width:0px; 使得分配的空间大于设置的width；然后最终选择分配的空间，从而规避这个问题

                      &:nth-child(3), &:nth-child(4), &:nth-child(5) {flex: 9;width: 0px;padding-right: 0px;> div {max-height: rem(60px);padding-right: rem(10px);overflow-y: auto;width: 100%;}}

转载于:https://www.cnblogs.com/juliazhang/p/10052672.html

flex布局精髓和填坑相关推荐

flex布局应用与踩坑
一.预告本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学二.开篇 flex布局原本是好几个月前就一直 ...
使用 Flex 布局踩过的坑以及如何避免
flex布局中的常见问题 ❤支持一下博主呗啾咪❤ 使用 flex 布局宽度自动压缩解决方案 ❤支持一下博主呗啾咪❤ 使用 flex 布局宽度自动压缩 <view class="mov ...
快应用采坑与flex布局讲解
快应用之flex布局在我们常用的布局中有display + position + float进行布局,但是这些布局或多或少都有些麻烦(虽然我最喜欢用position,哈哈啥都能干).但是由于快应用只 ...
微信小程序（safair浏览器）flex布局中的坑
今天在用微信小程序做flex布局的时候遇到了一些问题. 布局简单来说是这样的,最外层是一个flex布局属性为flex-direction:column的元素.里面有未设置height,并且flex-g ...
关于flex布局在IE浏览器上的坑
最近在项目中,钟情于flex布局来搭架子,感觉确实是挺方便的,但是今天遇到一个挺玄幻的问题,flex-direction 属性在IE中执行力并不好, 代码就不贴出来了,毕竟是公司财产, 情景:并排的表 ...
谈一谈flex布局使用中碰到的一些问题
起因工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题,以及一些有意思的特性,在此写篇博客记录一下. flex三个值的含义众所周知,flex布局所有的属性有两种:一种作用在弹性容器(F ...
Flex布局搭建网页布局更方便
阮一峰的网络日志 » 首页 » 档案上一篇:ES6 的功能侦测库下一篇:Flex 布局教程:实分类: 开发者手册 Flex 布局教程:语法篇作者: 阮一峰日期: 2015年7月10日网页布 ...
Flex 布局教程：语法篇
阮一峰的网络日志 » 首页 » 档案上一篇:ES6 的功能侦测库下一篇:Flex 布局教程:实分类: 开发者手册 Flex 布局教程:语法篇作者: 阮一峰日期: 2015年7月10日网页布 ...
ie9兼容问题部分填坑
ie9兼容问题部分填坑最近在给公司的一个项目vue+ts重构,要兼容到ie9,遇到了一点小问题,记录下. Html 1.html5标签尽量不要使用 2.a标签的下载可以使用,但赋值失败.ie会下载出 ...
彻底弄懂flex布局
目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...

flex布局精髓和填坑

flex布局精髓和填坑相关推荐

最新文章

热门文章