如何利用flex布局实现各种布局

flex布局是一种很方便的布局，不用自己设置同行的div的高度相等，它们即可高度相等，并且可以方便的实现栅格系统等。下面是几种常见的布局，看flex如何实现：

两列等高布局：

左边固定宽度，右边占据剩余宽度：

<style>
    *{
        margin: 0;
        padding:0;
    }
    .grid{
        display: flex;
        border: 1px solid #ccc;
    }
    .gridCell1{
        background-color: #449fdb;
        flex-basis: 100px;
}
    .gridCell2{
        background-color: #3355D0;
        flex-basis:calc(100% - 100px);
    }
</style>
<body>
<div class="grid">
    <div class="gridCell1"><p>JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。</p></div>
    <div class="gridCell2"><h1>标题</h1></div>
</div>
</body>

实现效果：

Paste_Image.png

可以看到上述代码实现了一个左边固定宽度，右边占据剩余宽度的布局，并且高度相等。
原理：设置父容器为flex，子元素中左边设置flex-basis属性宽度为固定宽度，另外一个子元素的flex-basis属性设置为100%减去这个固定宽度即可。

栅格系统：

在Bootstrap中可以很方便的使用栅格系统引入各个div的宽度划分，如果不使用栅格系统，利用flex也是很容易实现的。

<style>
    *{
        margin: 0;
        padding:0;
    }
    .grid{
        display: flex;
        border: 1px solid #ccc;
    }
    .gridCell1{
        background-color: #449fdb;
        flex: 1;
}
    .gridCell2{
        background-color: #3355D0;
        flex: 4;
    }
    .gridCell3{
        background-color: #b6d0ba;
        flex: 1;
    }
    .gridCell4{
        background-color: #d064b9;
        flex: 1;
    }
</style>
<body>
<div class="grid">
    <div class="gridCell1"><p>JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。</p></div>
    <div class="gridCell2"><p>文字1</p></div>
    <div class="gridCell3"><p>文字2</p></div>
    <div class="gridCell4"><p>文字3</p></div>
</div>
</body>

效果图：

Paste_Image.png

如上，flex属性为flex-grow flex-shrink flex-basis的简写属性，当只有一个非负整数时，表示flex-grow的值，另外两个值为 1和0%；flex-grow是项目的放大比例，所以上述四个div的宽度以1：4：1：1的形式呈现。
另一种情况：flex属性为百分比的情况

<style>
    *{
        margin: 0;
        padding:0;
    }
    .grid{
        display: flex;
        border: 1px solid #ccc;
    }
    .gridCell1{
        background-color: #449fdb;
        flex: 10%;
}
    .gridCell2{
        background-color: #3355D0;
        flex: 40%;
    }
    .gridCell3{
        background-color: #b6d0ba;
        flex: 10%;
    }
    .gridCell4{
        background-color: #d064b9;
        flex: 40%;
    }
</style>
<body>
<div class="grid">
    <div class="gridCell1"><p>JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。</p></div>
    <div class="gridCell2"><p>文字1</p></div>
    <div class="gridCell3"><p>文字2</p></div>
    <div class="gridCell4"><p>文字3</p></div>
</div>
</body>

效果图：

Paste_Image.png

当flex属性只有一个百分数时，表示的是flex-basis，其他的两个值flex-grow和flex-shrink均为0.

圣杯布局：

Paste_Image.png

<style>
    *{
        margin: 0;
        padding:0;
    }
    body{
        display: flex;
        flex-direction: column;
    }
    .header,.footer{
        flex: 1;
        background-color: #8591f7;
    }
    .container{
        flex:1;
        display: flex;
    }
    .left{
        flex-basis:100px;
        background-color: #449fdb;
    }
    .right{
        flex-basis: 100px;
        background-color: #3355D0;
    }
    .main{
        flex-basis: calc(100% - 200px);
        background-color: #6f7178;
    }
</style>
<body>
<div class="header"><h1>标题</h1></div>
<div class="container">
    <div class="left"><p>JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。</p></div>
    <div class="main"><p>文字1</p></div>
    <div class="right"><p>文字2</p></div>
</div>
<div class="footer"><p>页脚</p></div>
</body>

该布局需要设置两个flex，一个垂直方向，一个水平方向，垂直方向的容器为body，水平方向的容器为container。垂直方向的三个子元素分别设置flex属性为1，水平方向的三个子元素分别各自设置flex-basis。

如何利用flex布局实现各种布局