使用css3的grid和flex来完成圣杯布局

首先，学完grid layout和flex layout突然豁然开朗，猛然觉得传统的布局三板斧“position”+“display”+“float”是真的不行，使用起来复杂。而grid和flex布局是非常之简洁的，虽然会受到兼容性的问题。
下面我就使用Grid和Flex来完成圣杯布局。

所谓圣杯布局，就是“两边固定宽度，中间自适应”。
所使用的HTML都是下面的：

header

 
middle
 
left
 
right

footer

具体而言，也就是要完成以下的任务：

1.header和footer占屏幕全部高度，高度固定
2.中间的container部分是一个三栏布局
3.left和right宽度固定，middle自适应填满整个区域；高度为三栏中最大的高度；

一、Grid Layout

Grid布局基本的使用我就贴一个链接：
grid布局基础（https://www.html.cn/archives/8510#prop-grid-column-row
）
这篇文章基本上将Grid布局讲的非常透彻，可以学习一下。
好了，下面是我用Grid布局完成的圣杯布局。

使用Grid布局的难点就在于放置位置，按照先行渲染middle，那么在布局的时候，如何将middle置于中间，这里我采用的是grid的属性grid-area来设置每个div的位置。

这个在掌握基本的grid布局后会非常简单。

二、Flex Layout

弹性布局是接触比较多的，作为一个一维布局，使用起来还是比较方便的，不过与grid布局不同的地方在与，flex有一个order属性值，来对flex容器里的items进行一个排序，这样的话，那么排序的问题就变得异常轻松。但是，问题就在于如何使middle这个item能够自适应。

在flex中提供一个flex-grow的属性，用来对容器剩余空间进行分摊。

所以我就想到，对于right和left设置flex-grow为0，对于middle任意设置一个值就行。这样就可以保证设置right和left后，容器中剩余的空间全部都给到middle。

这样就算完成了中间自适应。
下面是我的代码，HTML都是最初的给的那个。

写完不易，点个赞再走，ball ball了。