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

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

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

">header middle left rightfooter

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

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布局完成的圣杯布局。

*{ padding:0; margin:0; } #container{ display:grid; grid-template-columns: 100px auto 100px; height: 50px; background-color: lightblue; } header{ grid-column:1/span 3; background-color: lightseagreen; height:200px ; } footer{ grid-column:1/span 3; background-color: limegreen; height:150px; } #mid{ background-color:lightcoral; grid-area:1/2/2/3; } #left{ background-color: lightskyblue; grid-area: 1/1/2/2; } #right{ background-color: lightpink; grid-area:1/3/2/4; }

使用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都是最初的给的那个。

*{ margin: 0; padding:0; } header{ background-color: limegreen; height:100px; } #container{ display: flex; width: 100%; height:100px; } footer{ background-color: lightcoral; height:100px; } #mid{ order:2; background-color: lightpink; flex-grow: 1; } #left{ order:1; background-color:lightcyan; width:100px; flex-grow:0; } #right{ order:3; background-color: lightgreen; width:100px; flex-grow: 0; }