css3之弹性盒模型初探（一）

什么是弹性盒模型？

弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小，即子集会按照父级的大小按比例自适应大小。 弹性盒模型的提出可以解决一些响应式布局的需求

 

如何使用弹性盒模型？

建立弹性盒模型： 给父级设置css属性display: flex; 即可。

若子集宽度大于父级宽度则子集会整体压缩或者给子集设置css属性flex-shrink: 1;浏览器会根据flex-shrink的比值进行按比例缩放。

若子集宽度小于父级宽度则可给子集设置flex-grow: 1;浏览器会根据flex-grow的比值按比例扩大，将剩余部分分布给子集元素

 

在弹性盒模型中，我们把父级叫做容器 子集叫做项目

 

 

弹性盒模型中项目有哪些可设置的css属性？

1.flex-shrink： 设置缩小比例 默认子集的该值均为1

案例：

代码：

 

效果：

分析：父级宽度： 500px 子集正常宽度每一个为300px 三个子集即需要父级900px的空间，但是父级宽度只有500px因此子集需要压缩400px，子集设置了flex-shrink，压缩比例为demo1：demo2：demo3 = 1 ： 2 ： 3；即 压缩的400px将分成6份每一份为66.6666 即demo1需要减掉66.6666 ， demo2需要减掉 133.3333， demo3要减掉199.9999，即demo1剩余部分为 300 - 66.6666 = 233.3334px ， demo2剩余部分为 300 - 133.3333 = 166.6667， demo3剩余部分为 300 - 199.9999 = 100

 

2.flex-grow： 设置扩大比例

不加flex-grow属性时默认flex-grow: 0;

案例代码如下

 

效果：

 

 

添加flex-grow属性之后的代码:

 

 

效果：

分析：父级宽度： 500px 子集正常宽度每一个为100px 三个子集即需要父级300px的空间，父级宽度500px超出子集200px，子集设置了flex-grow会按比例分配剩余的200px，分配比例为demo1：demo2：demo3 = 1 ： 2 ： 3；即 剩余的200px将分成6份，每一份的宽度为33.3333px；demo1将分配33.3333px， demo2将分配 66.6666px， demo3将分配99.9999px， 即demo1的宽度变为： 100px + 33.3333px = 133.3333px， demo2的宽度变为 100px + 66.6666px = 166.6666px ， demo3的宽度变为 100px + 99.9999px = 199.9999px。

 

 

欢迎加入web前端冲击顶级高薪大厂学习群，群聊号码：820269529