如何用一个公式搞定等分布局，估计你也这么搞过

关于CSS布局，我在前面讲过居中，讲过多列布局的定宽布局，如果一路都看过来的话，或者是你本来就知道这些处理方式的话，你就会发现，其实关于布局，常用的处理方式就是float，table，flex等，再结合一些其它的属性，基本就可以满足你的需求了，等分布局也是如此。

关于这篇要讲的等分布局，是我们日常工作中，最最最常见的一种情况。然而，到现在为止，我依然是从一公式来开始的。下面听我来详细一下布局过程。

先看一张原理图：

这个是等分布局的原型，上面图字母表示的是长度。然后我们公式化：

由公式导出的等式，我们再得出一张完整的原理图，如下：

然而，从上图中，可以看出，要实现等分布局，我们需要解决两个问题：

1、如何让总宽度增加g（l+g）

2、如何让每个宽包含g（w+g）

下说一下如何用常用的方式来处理这两人问题。

方式一、用float

每一个子元素div.column里面还包了一层p，这个p元素是我们用来实际放内容的。我们增大div.parent的实际宽度后，再用CSS3的box-sizing将内边距设置在宽度内。如下所示：

这种方式的好处就是兼容性好。效果如下

方式二、用table

由上在的DOM结构看到，我通过在父元素的外面在增加一个修复的框div.parentFix。然后将父框转换为table，将子框转换为table-cell进行布局。

这个方式的优点，应该都看出来了，就是结构和块数无关联（不会像float一样要预设宽度）。

方式三、用flex

flex称css3的布局利器，真是，水平垂直要让它咋布就咋布。等分布局自然也就比较容易了。

看一下样式怎么处理的：

flex布局的优点就是代码量少，同样与块数无关，要注意的就是兼容性，不过我觉得也需太关注兼容了。

最后总结一下：

等分布局太常见，处理方式基本上就这么搞的， 我大概梳理了一下思路流程，或许还有其它方式，可以一起交流。