Flex布局实战（六）

        终于按照事先的想法和计划，写道了Flex布局的最后一篇，今天就将最后一篇洗完，也好对Flex布局告一段落，后续小编的主要精力在就放在React这块了，如你正在学习React或者即将学习React，可以和小编一起探讨学习。先在最后一篇Flex布局文章中罗列下前期写的Flex布局的系列文章标题。

• 认识Flex布局（一）：主要是罗列下Flex布局的基本概念和整体认识

• 认识Flex布局（二）：主要是讲解Flex布局的容器属性

• 认识Flex布局（三）：主要是讲解Flex布局的项目属性

• Flex布局实战（一）：主要是将实战的主要内容进行效果展示和罗列

• Flex布局实战（二）：主要是实战骰子布局

• Flex布局实战（三）：主要是实战网格布局

• Flex布局实战（四）：主要是实战流式布局

• Flex布局实战（五）：主要是实战输入框布局

• Flex布局实战（六）：主要是实战圣杯布局，也是完结篇

        如果大家有兴趣，可以一一的学习与实现，现在小编就直接进入今天的主题，讲解圣杯布局。

开始讲解圣杯布局

首先先给大家说下大致的思想，作为后续代码讲解中能够理解。

1. 先将页面作为一个容器，则设置body的class为main

2. 在body容器中，分别添加了class为head的header标签，class为body的div标签和class为foot的footer标签，将容器设置为flex-direction: column;从上至下的排列。

3. header标签内部的元素就不做详细讲解，主要是满足圣杯布局。

4. class为body的div标签内部分别设置了nav标签（菜单）、div（分隔线）和div（内容区）。

5. footer标签与header类似，内部标签不做详细讲解。

有了 上述的思路，我们开始实现圣杯布局，其中第四步相对复杂些，描述中不够详细，在下面的实现中来讲解。

整体效果图

此效果图，是小编将前面实现的Flex布局嵌入到里面了，所以效果相对丰富些，由于此篇文章的主体是圣杯布局，所以小编会简单的来实现上面的布局。如果大家对上面的效果图有兴趣，可以与小编联系。

实现的HTML和CSS样式：

对应的CSS样式：

以上面的HTML和CSS样式的实现圣杯布局效果：

结尾

         写Flex布局这一系列的文章，小编收获很多，也对自己对Flex布局学习做了一个总结，对于后期再React Native实现布局是有一定的帮忙的。

        也感谢各位抽时间来看小编的文章，希望此系列的文章能够帮到大家，也希望大家能够帮忙转载或者转发，可以让更多的人一起关注“全栈工程师成长记”这个公众号，与大家一起学习！