弹性盒的均分布局

引言

本章我们使用flex弹性盒的均分布局实现一个三栏布局的小案例

flex-grow属性

flex-grow用通俗的话来讲，就是分配容器剩余空间的比例

示意：

在上面弹性盒布局中，总宽度为1000px， 盒子item1的宽度为400px，后面三个盒子分配剩余空间比例为1、2、3,那么item2、item3、item4的宽度即为100px、200px、300px。

问题:

在设置三栏布局中我们很容易想到，设置每个子元素的flex-grow为1, 以达到均分布局。但是这样会产生一个问题，如果某个容器内有内容的话，那么当前这个容器的宽度就变成了内容宽度 + ( 剩余空间宽度 / 3 ),要解决这个问题，我们就要在用到flex弹性盒的另一个属性 flex-basis。

flex-basis属性

flex-basis用通俗的话来讲，就是flex元素增长的起点，默认值为auto,只需要将它设置为0，那么它将从0开始进行空间的分配。

实现效果：