首先，學(xué)完grid layout和flex layout突然豁然開朗，猛然覺得傳統(tǒng)的布局三板斧“position”+“display”+“float”是真的不行，使用起來復(fù)雜。而grid和flex布局是非常之簡潔的，雖然會(huì)受到兼容性的問題。
下面我就使用Grid和Flex來完成圣杯布局。

所謂圣杯布局，就是“兩邊固定寬度，中間自適應(yīng)”。
所使用的HTML都是下面的：

<header>header</header>
<div id="container">
 <div id="mid">middle</div>
 <div id="left">left</div>
 <div id="right">right</div>
</div>
<footer>footer</footer>

具體而言，也就是要完成以下的任務(wù)：

1.header和footer占屏幕全部高度，高度固定
2.中間的container部分是一個(gè)三欄布局
3.left和right寬度固定，middle自適應(yīng)填滿整個(gè)區(qū)域；高度為三欄中最大的高度；

一、Grid Layout

Grid布局基本的使用我就貼一個(gè)鏈接：
grid布局基礎(chǔ)（https://www.html.cn/archives/8510#prop-grid-column-row
）
這篇文章基本上將Grid布局講的非常透徹，可以學(xué)習(xí)一下。
好了，下面是我用Grid布局完成的圣杯布局。

<style>
        *{
            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;
        }
    </style>

使用Grid布局的難點(diǎn)就在于放置位置，按照先行渲染middle，那么在布局的時(shí)候，如何將middle置于中間，這里我采用的是grid的屬性grid-area來設(shè)置每個(gè)div的位置。

這個(gè)在掌握基本的grid布局后會(huì)非常簡單。

二、Flex Layout

彈性布局是接觸比較多的，作為一個(gè)一維布局，使用起來還是比較方便的，不過與grid布局不同的地方在與，flex有一個(gè)order屬性值，來對(duì)flex容器里的items進(jìn)行一個(gè)排序，這樣的話，那么排序的問題就變得異常輕松。但是，問題就在于如何使middle這個(gè)item能夠自適應(yīng)。

在flex中提供一個(gè)flex-grow的屬性，用來對(duì)容器剩余空間進(jìn)行分?jǐn)偂?/p>

所以我就想到，對(duì)于right和left設(shè)置flex-grow為0，對(duì)于middle任意設(shè)置一個(gè)值就行。這樣就可以保證設(shè)置right和left后，容器中剩余的空間全部都給到middle。

這樣就算完成了中間自適應(yīng)。
下面是我的代碼，HTML都是最初的給的那個(gè)。

<style>
        *{
            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;
        }
    </style>

寫完不易，點(diǎn)個(gè)贊再走，ball ball了。