css3弹性布局中的精髓flex属性深入理解，知识积累总结（1）

前言：近日在浩如烟海的海量百度信息中，看了很多难以找到出处的人的各种各样文章，一些靠谱权威的专业性网站，或是一些大佬的文章，但是呢，要么专业性，权威性很强，具有很强的说服力，不过理解起来相当费力，一些通俗易懂的呢，专业性，权威性又得不到保障，很难分辨孰优孰劣，但如此模棱两可，八面玲珑的话，啥也不干，只写写文章还可以，但是要编写真正的代码，可不行，你总得需要一个不是标准的标准，来指导自己的编码规范吧。

这个参数核心意义在于，计算剩余空间时一个依据，衡量一个元素所占主轴方向空间

这个参数核心意义在于，计算剩余空间时一个依据，衡量一个元素所占主轴方向空间

这个参数核心意义在于，计算剩余空间时一个依据，衡量一个元素所占主轴方向空间

个人的理解便是：

第一点：这个属性是在弹性布局中才起作用，

第二点：它强调的是变化中分配情况，请看代码：

容器：width:375px;display:flex;

第一个元素：width:100px;flex:1;

第二个元素：width:40px;

第三个元素：width:60px;

最终显示结果：

因为子元素合计占据主轴方向宽度：200px;

剩余175px;需要分配，因为子元素只有第一个元素有flex为1，即相当于全部分配，因此

结果是：275px;

这里明显看到，第一个元素给的初始宽度没有起作用，白写一般，

为什么呢？flex是一个复合属性：

flex=flex-grow+flex-shrink+flex-base;组成

上面写法：含义是：flex:1 0 0%；

即flex-base:0%;不用考虑自身大小，进行扩大

这个参数核心意义在于，计算剩余空间时一个依据，衡量一个元素所占主轴方向空间

这个参数核心意义在于，计算剩余空间时一个依据，衡量一个元素所占主轴方向空间

这个参数核心意义在于，计算剩余空间时一个依据，衡量一个元素所占主轴方向空间

重要的事情说三遍：

例子依据是：

第一个元素：flex:1 0 20%;

第二个元素：flex:4 0 25px;可以给px,也可以给百分数，相对父

第三个元素：width:75px;不给默认就是：flex:0;即不缩放

这样一来，计算剩余空间就是：375-（375*20%+25+75）=200；

第一个元素：最终是375*20%+200*（1/5）=115

有宽度值，flex-base=width,

没有宽度值，flex-base=0， 

相当于优先级大于width,

注意,正是这个width作用比较微弱，实际使用当中，常结合max-width或是min-width使用

w3c以上有短话：

默认情况下，弹性项目不会缩小到低于其最小内容大小（最长单词或固定大小元素的长度）。要更改此设置，请设置min-width或min-height属性。（参见§4.5Flex项目的自动最小尺寸。）

同时实际大项目中，比如某僵公司，实际代码中也的确如此，

结尾：

实际上考虑浏览器历史版本，以及手机移动，电脑，平板，各种环境，真的多如牛毛，想要统一起来，几乎不可能，虽然谁都希望有统一规范，但现实世界正是如此，和理论完全不同，虽然以下内容是基于W3c组织的一个网站，但它自己都声明这仅仅只是一个起草规范，

https://drafts.csswg.org/css-flexbox/#flexibility

 

它给出的定义如下:(谷歌浏览器翻译得到)

flex布局的定义方面是能够使flex项 “flex”，改变它们的宽度/高度以填充主要维度中的可用空间。这是通过flex属性完成的。柔性容器将自由空间分配到其物品（与其柔性生长因子成比例）以填充容器，或收缩它们（与其挠曲收缩因子成比例）以防止溢出。

一个柔性的项目是完全缺乏弹性，如果它的两个柔性成长和弹性收缩值是零，而灵活的其他方式。

7.1。该柔性速记

名称：	柔性
值：	没有| [ <'flex-grow'> <'flex-shrink'> ？ || <'flex-basis'> ]
初始：	0 1自动
适用于：	弹性物品
遗传：	没有
百分比：	看个别财产
计算值：	看个别财产
动画类型：	按计算值类型
规范顺序：	每个语法

的挠曲属性指定的部件灵活长度：flex因子（生长和收缩）和flex基础。当一个框是一个柔性的项目，柔性提供谘询，而不是在主大小属性来确定主尺寸的方块。如果框不是弹性项，则flex不起作用

个人现在不是写书，其他更加深奥，底层解析渲染原理，不做探讨，关于flex属性，就写到这儿，反正对于个人而言，关于flex属性的掌握，对于编码而言足够，希望这些总结，能帮到其他人，欢迎留言交流，共同学习。