这篇来说一下多列布局的后两种-等分布局与等高布局。
我们所说通常所说的等分布局如下：
等分1
上述父盒子的宽度固定，例如为540px，并有一个padding: 10px，子元素间留白固定为20px，元素宽度相同。
实现等分布局有以下几种方法。
1、使用float。
2、使用table。
3、使用flex。
1、使用float。我们知道，要实现元素间留白可以使用margin或padding。由于使用margin不好控制宽度，我们会选用padding来为元素间留白。若要等分上述4个子元素，也就是说四个元素的width: 25%;box-sizing: border-box;background-clip: content-box;结果会是下面这个样子。
等分2
也就是说最左边会多出一个20px的空隙，那么，如何消除这个空隙呢？首先，思考一下下图与上图的区别是什么。
等分1
我们发现上图最左边元素并没有padding-left或者说我们看不到它的padding-left。由于我们统一设置了四个子元素的宽度为25%，所以最左边的padding-left并不是没有，而是被隐藏起来了。那么，如何被隐藏的呢？由于最左边元素是有padding-left为20px的，而每个元素宽度都为25%，所以，我们所看到的四个子元素的父元素宽度并不是绿色盒子内容区的宽度，而是比这个宽度大20px。也就是说，要实现上述布局，要设置三个盒子，第一个是绿色的盒子，设置width:540px， padding:10px，box-sizing:border-box;下面套了一个盒子，设置margin-left为-20px;由于块级元素默认会撑满父元素宽度，所以设置margin-left:-20px后，该元素宽度比父元素的内容区宽度大20px，该元素下面才是四个子元素，设置width: 25%; padding-left: 20px;
上述使用float实现等分布局的方法有个缺点，假如我们要改变子元素的个数，那么我们除了要改变html结构，还要改变css的设置对元素所占的百分比进行调整。使用table及flex则没有这方面的问题。
2、使用table。设置父元素display: table; width: 100%; table-layout: fixed，子元素display:table-cell，默认平分父元素宽度。具体点击（不）定宽+自适应布局中关于table-cell的探索。问题是，这样的话布局会像是图1所示，如何去除多余的空隙呢？我们可以给父元素包一个parent-fix元素作为修正，设置parent-fix元素的margin-left: -2opx，父元素的宽度由于是100%，也就会比之前大20px，然后设置子元素的padding-left: 20px就可以实现图2等分效果。
3、使用flex。因强大而简单。设置父元素display: flex，子元素flex: 1; 给除第一个元素外的子元素设置margin-left为20px（.child+.child{margin-left: 20px;})。大功告成。
让我们进入等高布局。
等高布局即是使得并排的元素它们的高度相等。
下面介绍三种方法。1、table；2、flex；3、float
1、使用table，table-cell元素天然等高，我们只需要设置父元素display:table，子元素display: table-cell。
2、使用flex，默认情况下，flex-item的align-items为strech，也就是说高度上默认等于父元素高度。所以flex-item默认等高。
3、使用float。设置如下，.parent{overflow: hidden}，其下的两个子元素left、right，.left,.right{float: left; padding-bottom: 9999px; margin-bottom: -9999px;}。这种方式实现的效果其实是伪等高，因为left与right元素的真实高度是不同的，只是它们的高度差使用padding填充了，看起来好像是等高的。
现在，已经介绍了布局里面的定宽+自适应、不定宽+自适应、等分、等高布局。总结下来，我们可以熟练巧妙的使用float，table、flex这三种强大的工具完成大部分布局。
网友评论