基于flex的网格布局

Posted 2020-09-24 Romayn

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>