flex 实现的圣杯布局

本文主要是介绍flex 实现的圣杯布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

• 关键点
  通过 margin-left 与 left 属性将左右两列放置到准确的位置；
  父元素需要设置 padding；
  margin-left 取值为百分比时，是以其父元素的宽度为基准的；
• 和双飞翼不同的地方
  圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。

html：

<div class="container"><div class="middle

这篇关于flex 实现的圣杯布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---