CSS3 Flex盒模型深入研究

CSS3大力推出的Flex盒模型，应该是现在布局世界中的一大神器，各种属性使用和介绍比比皆是，然而CSS本身就是一个相互作用和影响的世界，弹性盒子也一样。

最近利用Flex盒子布局时，偶遇一些怪异现象，比如flex-shrink无效，align-item失效等等，决定好好研究一下这些属性之间的相互作用和影响，以后能够准确的使用。

说明：

1.  本文是一篇研究结论文章，没有实例（主要是各种属性穿插测试的太多了，如果分解，则会出现太多累赘代码，再者作者有些懒惰了n(*≧▽≦*)n），所以力求简单明了的把结论叙述清楚，让大家明白；

2. 本文叙述以横向布局为例，因此都是宽度概念为主，纵向时，即换成高度概念，结论适用。

父元素属性

Flex盒模型的父元素可能存在以下大坑：

align-content和align-item属性：

1. 单一主线时, 是align-item的天下，纵向位置先由它统一说了算（“先”的意思是，它的小弟——子元素的align-self可能会覆盖它），align-content是无效的；

2. 多条主线时，即出现flex-wrap:wrap或flex-flow: wrap [row,column]属性时，如果依然只有align-item，则还是它说了算；但是如果出现了align-content，则一切掌控皆由align-content负责，align-item大权尽失！！除非align-content的值为stretch(默认值)，此时等同于没有设置align-content，则align-item生效；

3.  当align-content生效时，子元素的align-self是无效的，因为它覆盖的是align-item，而此时这个大哥是失宠的，大哥都失宠了，小弟又能如何。同理，除非align-content为stretch(默认值)，它们俩才能恢复往日风范。

子元素属性

子元素属性可能有以下好几个大坑：

1. flex-grow属性：默认是0，子元素在剩余空间中都不拉伸，当出现非0值时开始拉伸；其中，当所有子元素共用同一个数值，则表现为等分，如果有一个值不同，则拉伸幅度为当前子元素flex-grow值除以共同值的倍数：如共同值为5，当前值为1，则表现为其他子元素的1/5宽度拉伸；为15时，表现为其他子元素的3倍宽度拉伸；当多个值都不同时，则表现为与最大数值的倍数比，计算方式同上；如果有非"auto"值的显式宽度width属性设置，则宽度会成为主导因素（例外：如果所有子元素宽度值相同，则此时相当于没有设置宽度，计算仍以flex-grow值为主）。

2. flex-shrink属性：必须有显式的非“auto”宽度设置才生效，默认是1，即宽度不够时自动缩放（这也是为什么通常情况下，无论怎么设置宽度，子元素都不会溢出，而且占满容器时宽度值将不再起作用的原因）。实际效果中，当子元素宽度超过父元素平均分配值时，子元素会随shrink值扩大或缩小，以下称之为“宽度抢占”；如果有子元素的flex-shrink值为0时，即不缩放，则当该元素宽度超过100%时，会将其他元素挤出父元素之外，发生溢出，原因就是此时元素不再被缩放；由于测试中数据变化暂未发现规律，因此只能定性出以下结论：shrink值设置越大的，在“宽度抢占”中越吃亏，即会被缩小，即使两个子元素宽度都一样，但是shrink值小的仍会占据更多宽度空间，而当发生“宽度抢占”情况时，flex-grow的值将失去作用（原因是此时已经没有剩余空间可分配，拉伸扩展无从谈起），一切显示只由shrink和宽度值来共同决定；当shrink值都一样（非0值），则等比例缩放。

3. flex-grow和flex-shrink设置负值无效，在父元素flex-wrap属性为“nowrap”或者是“wrap”时无显式宽度设置或者宽度为“auto”时作用显著；一旦在“wrap”情况下设置了宽度，当某一个或几个子元素宽度超出100%，会发生换行，则上述两个属性作用将会被削弱，此时宽度主导布局。

4. flex-basis属性：这个属性设置会干扰flex-shrink和flex-grow的正常表现，定义中这个属性是在空间剩余的情况下，优先给予子元素设定的空间数值，该元素在不同方向的弹性布局中可以近似理解为宽或者高，即可以设置具体px数值，百分比等，默认auto。一旦子元素设置了这个属性的具体值，那么在flex-grow作用时，会给当前子元素再自动扩展一个近似flex-basis数值的宽度（空间不足时浏览器会自动计算），即在扩张地盘时多获得一块flex-basis大小的地盘；而在flex-shrink作用时，将会把当前子元素的宽度设定为近似flex-basis的数值，即固定住了地盘，无论子元素的shrink值有多小，你都无法打赢“宽度抢占”的战役，或者说，是没有资格参与这场战役！不过，一般很少用到这个属性。

5. align-self属性的坑已经在父元素属性中顺带填平了，大家可以回顾一下。

不得不说CSS是相互作用，相互影响，综合表现的典型代表，各项属性之间虽没有逻辑性的联系，但是却有实际中的影响，这也是CSS复杂的一个原因，所以要用好CSS，发挥强大的功能，还是需要不断探索和研究的。

基于测试环境的限制，如果有出入，还请大神留言指正，不胜感激！

 

 

工作累了吧，可以关注公众号，看看轻松的文章，放松一下。再忙，也该有自己的生活，一定要爱惜身体！