父盒子寬度不固定水平居中彈性佈局

grid佈局

最近開發遇到一個簡單的佈局需求，嘗試了幾次總達不到ui的需求；
需求如下：
1.父盒子寬度不固定，內部有多個寬度固定的子元素組成，要求父盒子水平居中，內部元素隨著寬度的變化，排列個數自動變化的彈性佈局；
2. 整個內容區域上下間隔之比為1：2；
很顯然這種佈局方式，單純的flex肯定是不滿足的，但是同樣的有另外一種表格佈局grid可以達到目的，二話不說直接上程式碼；
css部分：

  .f{
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .t{
        flex: 1 1 auto;
    }
    .parent{
        display: grid;
        grid-template-columns: repeat(auto-fill, 300px);
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        justify-content:center;
        width: 100%;
        overflow-y: auto;
        flex: 0 0 600px;
    }
    .b{
        flex: 2 2 auto;
    }
    .son{
        width: 300px;
        height: 400px;
        background-color: blueviolet;
    }
容器部分：
<div class="f">
	<div class="t"></div>
	<div class="parent">
        <div class="son">son1</div>
        <div class="son">son2</div>
        <div class="son">son3</div>
        <div class="son">son4</div>
        <div class="son">son5</div>
        <div class="son">son6</div>
        <div class="son">son7</div>
        <div class="son">son8</div>
        <div class="son">son9</div>
    </div>
    <div class="b"></div>
</div>

關於屬性grid的相關知識。可以查閱阮一峰老師的部落格，很詳細；
參考文件：
1.CSS Grid 網格佈局教程