多栏布局

现在很少接触到太多的 CSS 问题了，多数情况下 flex 都是最佳的选择，慢慢也就对基础生疏了，今天来总结下常见的布局问题。示例中关于 flex 的布局都比较简单，不理解的需要重新补习 flex 基础。本文中的示例和代码都在 codepen 上，如果加载异常请先科学上网。

具有固定宽高的布局方式在实际需求中其实很少见，一般都会有自适应的区域，接下来就来看看常用的几种布局。

两栏布局

常见的两栏布局一般是左侧固定，右侧自适应。

1. float

2. position

3. table-cell

4. flex

三栏布局

简单的三栏布局可以拆分成两栏布局嵌套两栏布局的方式设计，在此基础上如果拆分为中间元素和两侧元素的话，则需要真正的三栏布局来设计了。

首先是左右固定，中间自适应的布局。

1. float

2. float + margin 负值，两栏布局也可以采用这种方法

3. position

4. flex

另一种是中间定宽，两侧自适应的布局。这个情况需要在固定中间元素的前提下，使左右两侧浮动或者绝对定位即可，下例使用 float 做了演示，同上述例子类似，float 的元素也可以使用 position 进行绝对定位替换，这里不再演示。

等高布局

等高布局是一种要求各栏背景颜色填充至等高的样式。

1. 两栏等高

2. 三栏等高

以上布局如果需要流式布局，宽度替换为百分比即可。关于三栏等高布局，根据上例下图能帮助很好的理解。其中主要利用了相对定位的方式，2 层容器的 right 距离为第三栏（最右栏）元素的宽度，3 层容器的 right 距离为第二栏（中间栏）的宽度；对于子栏目来讲，它们的 left 距离均为除了第一栏（最左栏）的宽度之和。理解了原理之后，根据需要，扩展更多的子栏也可以运用同样的方式。

小结

本文仅仅展示了几种常见的布局结构以及对应的常用方法，自适应的布局在页面重构中很经常遇到，需要加强更多的响应式知识才能熟练。

参考资料

1. 两栏布局，三栏布局，等高布局，流式布局
2. 八种创建等高列布局