CSS圣杯和双飞翼布局

圣杯布局参考http://blog.****.net/sunshine_zcc/article/details/51622599

利用flex脱离文档流,利用padding预留出位置,利用margin-left实现布局,利用positionleft/right填充位置,好处是:优先渲染主要dom, main部分是自适应宽度的,很容易在定宽布局和流体布局中切换等。

CSS圣杯和双飞翼布局

CSS圣杯和双飞翼布局CSS圣杯和双飞翼布局CSS圣杯和双飞翼布局

双飞翼布局https://www.cnblogs.com/hl-520/p/5754111.html

利用flex脱离文档流,在maincontext外层再包裹一个div,即maincontent外层两层div,leftcontent一层,rightcontent一层,利用flex脱离正常文档流,不需要padding预留出位置,也不需要用positionleft/right填充位置,利用margin-left实现布局,maincontent的最外层div打底,内层div设置margin-leftmargin-right即可。

CSS圣杯和双飞翼布局
CSS圣杯和双飞翼布局

CSS圣杯和双飞翼布局

双飞翼的好处:除了圣杯的好处之外,还使得,让Main变成BFC元素了,屏幕宽度缩小Main也不会被挤下去,圣杯布局就会被挤下去。红色剪头两部分对比,方便加三栏之间的padding