圣杯布局、双飞翼布局、flex布局

在面试中，我们经常会遇到CSS中两端宽度固定大小，中间自适应问题

问题：

   编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为100px，right宽度为200px，main处在中间，宽度自适应

解决方法：

圣杯布局

页面DOM结构如图：

设置外层div内边距，使中间div宽度为100%，将所有节点设置浮动方向为left，利用margin-left负值将left元素拉到

父元素content起点，在设置相对定位将left拉到父元素padding起始处，同理right元素也是

双飞翼布局

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。

页面布局如下

双飞翼布局不用设置外层父元素，主要设置在中间元素，设置center-content元素宽度100%，内层center1元素设置margin，其他就不多说，直接上style

Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

页面布局：

CSS样式：