如何建立一個全等四宮格/九宮格（容器寬高未知）

html代碼以下

<div class="container" >
    <div class="parent">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="parent">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

css部分如何實現呢？咱們能夠用 flex

.container{
        display: flex;
        flex-flow:column nowrap;
        width: 1000px;/*任意改變長寬*/
        height: 600px;
        background:#ccc;

    }
    .parent{
        display: flex;
         flex-flow:row nowrap;
        flex:1 1 0;/*元素彈性*/
        text-align: center;
    }
    .container .parent:first-child{margin-bottom: 10px;}
    .item{
        flex:1 1 0;/*元素彈性*/
        background: green;
    }
    .parent .item:first-child{margin-right: 10px;}

有興趣的能夠試一下，當容器寬高發生變化時，內容塊仍然是全等的四宮格。

固然，以上有代碼一個問題，flex在ie9如下是不兼容的。