Bootstrap網格系統的強大，已經能滿足大部分前端開發的需求。但沒有很好的解決固定寬度、寬度百分比和高度對齊的問題。

Flex(IE10+)可以很好的解決BootStrap的問題：

CSS部分：

.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

    .row[vertical-align="top"], .row[align="top"] {
        -webkit-box-align: start;
        align-items: flex-start
 
;
    }

    .row[vertical-align="bottom"], .row[align="bottom"] {
        -webkit-box-align: end;
        align-items: flex-end;
    }

    .row[vertical-align="center"], .row[align="center"] {
        -webkit-box-align: center;
        align-items: center;
        text-align: inherit;
    }

.col 
 
{
    flex: 1;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

    .col[vertical-align="top"], .col[align="top"] {
        align-self: flex-start;
    }

    .col[vertical-align="bottom"], .col[align="bottom"] {
        align-self: flex-end;
    }

    .col[vertical-align="center"], .col[align="center"] 
 
{
        -webkit-align-self: center;
        text-align: inherit;
    }

HTML部分：

 <div class="row">
        <div class="col" align="top">
            <div>
                頂部對齊
            </div>
        </div>
        <div class="col">
            <div>
                博客園cnblogs.com  
                <br />
                博客園cnblogs.com
                <br />
            </div>
        </div>
        <div class="col" align="bottom">
            <div>
               底部對齊
            </div>
        </div>
    </div>

基於flex的網格布局