开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

前言

在日常的网站浏览中，特别是博客类的网站，通常使用两栏布局，或者是三栏布局

两栏布局：

三栏布局：

无论是两栏，还是三栏，都是中间的内容主页面自适应，侧边栏不变

而且三栏布局是在两栏的布局的基础上进行，因此我们可以直接学习三栏布局一步到位就可以了

主要的难点在于如何让中间栏去自适应

废话不多说我们直接开始

Flex布局

在flex弹性布局中，有一个属性flex: 1;

它是是flex-grow，flex-shrink和flex-basis的简写，默认得是：flex:1 表示 flex: 1 1 0% ：

• 第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；
• 第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；
• 第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。

所以就是固定左右两个侧边栏，然后中间的主内容可以使用flex:1;自适应

代码效果图如下：

绝对定位

利用绝对定位的话，其实是将两个侧边栏通过绝对定位放到两边，然后通过让主内容盒子的外边距margin等于侧边栏的宽度，这样即时中间内容宽度改变，外边距也不会改变，因此可以自适应大小。

代码如下:

浮动

浮动和绝对定位的原理类似，都是放到中间盒子的外边距margin里

需要注意的是，需要将中间盒子放到最后，这是因为，在中间的话会将右侧的盒子挤下去，如下图

因此我们需要将中间盒子放在最后，代码效果图如下：

另外还有比较特殊的方式，圣杯布局和双飞翼布局，在实现思路上都大同小异，大家可以自信了解一下。