flex布局_flex布局的 flex（felx-grow、flex-shrink、flex-basis）详解

flex布局中的flex-grow,flex-shrink,flex-basis

接上篇文章，

1. flex-grow属性

flex-grow定义剩余空间的分成。默认为0，即如果存在剩余空间，也不放大。

如何理解这里的剩余空间呢，用例子来说明吧。

默认的情况(flex-grow:0)在浏览器下是

将flex-grow:1 时是:

此时我们将例子变一下

浏览器就是

通过上面的动手,我自己总结出

flex-grow会覆盖你设置的width属性,使之失效
当三个div同时设置相同的非 0 正整数时,即为三个div平分剩余空间.
- 剩余空间=浏览器宽度-item内容宽度之和
- flex-grow设置为负值时等于0
当三个div flex-grow数值不同,则按比例分配剩余空间.当有没有设置felx-grow,且有width属性的话,先减去其占有的宽度;
- 这里有一个误区就是认为flex-grow:1,flex-grow:2 的宽度时1:2,错! 是分配的剩余空间1:2

常用:在布局的时候,想让一个item填满整行,其余占据其内容宽度就可以了比如这样

是不是就不需要使用 float啦,是不是不用清除讨厌的浮动啦.嘻嘻

2. flex-shrink

flex-shrink属性定义了项目的缩小比例。flex-shrink的默认值为1，flex-shrink的值为0时，不缩放。

flex-grow是对剩余空间的分配,而flex-shrink就是对空间不足时怎么安排的设置.

同样的当空间不足,比如三个div宽度都为200px 父盒子只有400px,那么默认是平均分配这个不足的空间,每个div占据200px(本身)-200px/3(缺的200px平分)=133.333px 基本和flex-grow一致啦.

但是呢有一点不同的就是在flex-shrink是默认缩小,当然也不会覆盖你设置的width,所以设置了一个item为固定宽度时,不要想着他不会shrink喔. 和felx-grow差不多啦

3. flex-basis

flex-basis属性定义了项目占据的主轴空间。浏览器根据这个属性，计算主轴多余空间或不足空间的大小。它的默认值为auto，即项目的本来大小。

感觉上基本和width差不多都是指定item的宽度啊.

然后就是

4. flex

flex是上述三种一起的简写方式. 顺序对应,felx-grow flex-shrink flex-basis 默认flex:0 1 auto; 有两个个特殊值.

flex:none;即为flex:0 0 auto
flex:auto;即为 flex:1 1 auto
然后flex为一个正整数时
例如flex:1 即为flex:1 1 0%;
flex为一个长度1px or 百分号1%
例如:flex:0% 即为flex:1 1 %0

我们通常使用flex:1 来使得一个元素,有剩余空间时他扩张,空间过小时他先缩小

效果：

挺方便的．