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

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

两列等高布局：

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

    
JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。
    
标题

实现效果：

Paste_Image.png

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

栅格系统：

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

    
JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。
    
文字1
    
文字2
    
文字3

效果图：

Paste_Image.png

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

    
JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。
    
文字1
    
文字2
    
文字3

效果图：

Paste_Image.png

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

圣杯布局：

Paste_Image.png

标题

    
JS中没有块作用域的概念，所以下列的代码中的i可以在全局环境中访问，但这样会有一个弊端：污染了全局环境，因为在大型工程中，有可能会导致变量冲突。
    
文字1
    
文字2

页脚

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