Flex Layout

flex布局的功能十分强大，目前 Bootstrap 等CSS库，都采用Flex布局。

Flex

Flex 是 Flexible Box 的缩写，意为”弹性布局”，使用它之前：

#box {
    display: flex; 
}

.items {
    width: 100px;
    height: 100px;
}

仅仅给它一个装它用的盒子，它就能自动帮你开始布局了！！！

子元素的属性

事实上，子元素是存在属性你可以这样设置：

#box {
    display: flex; 
}

.items {
    flex: 1 1 100px;
}

那么这三个数字分别代表：flex-grow，flex-shrink，flex-basis的值，你完全可以写作：

#box {
    display: flex; 
}

.items {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}

flex-grow，扩展比率；
flex-shrink，收缩比率；
flex-basis，伸缩基准值，相当于你给它设置最小宽度(width)；

Flex 栅格系统

在这之前，相信你一定了解浮动实现栅格系统了，这次，我们使用 flex 完成栅格系统：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="Container">
        <div class="row">
            <div class="one column">ONE</div>
            <div class="eleven columns">ELEVEN</div>
        </div>
        <div class="row">
            <div class="two columns">TWO</div>
            <div class="ten columns">TEN</div>
        </div>
        <div class="row">
            <div class="three columns">THREE</div>
            <div class="nine columns">NINE</div>
        </div>
        <div class="row">
            <div class="four columns">FOUR</div>
            <div class="eight columns">EIGHT</div>
        </div>
        <div class="row">
            <div class="five columns">FIVE</div>
            <div class="seven columns">SEVEN</div>
        </div>
        <div class="row">
            <div class="six columns">SIX</div>
            <div class="six columns">SIX</div>
        </div>
        <div class="row">
            <div class="seven columns">SEVEN</div>
            <div class="five columns">FIVE</div>
        </div>
        <div class="row">
            <div class="eight columns">EIGHT</div>
            <div class="four  columns">FOUR</div>
        </div>
        <div class="row">
            <div class="nine columns">NINE</div>
            <div class="three columns">THREE</div>
        </div>
        <div class="row">
            <div class="ten columns">TEN</div>
            <div class="two columns">TWO</div>
        </div>
        <div class="row">
            <div class="eleven columns">ELEVEN</div>
            <div class="one column">ONE</div>
        </div>
    </div>
</body>
</html>

我们要将页面分为12个等份，然后使用 flex 实现栅格系统。

body {
    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.Container {
    position: relative; 
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;

    overflow: hidden;   /* 触发 BFC 规则，避免子元素浮动后的父元素失去宽和高 */
}

.row {
    display: flex;
}

.column,
.columns {
    width: 100%;
    float: left;  /* 触发 BFC 规则 */
    box-sizing: border-box;

    font-weight: 400;
    letter-spacing: .1rem;
    margin-bottom: 1%;
    background-color: #CCC;

    height: 30px;
    line-height: 30px;
    text-align: center;

    border-radius: 5px;
}

.column:first-child,
.columns:first-child {
    margin-right: 4%;
}

.one.column,
.one.columns {
    flex: 0 0 4.66666666667%;
}

.two.columns { flex: 0 0 13.3333333333%; -ms-flex: 0 0 13.3333333333%; }

.three.columns { flex: 0 0 22%; -ms-flex: 0 0 22%; }

.four.columns { flex: 0 0 30.6666666667%; -ms-flex: 0 0 30.6666666667% }

.five.columns { flex: 0 0 39.3333333333%; -ms-flex: 0 0 39.3333333333%;}

.six.columns  { flex: 0 0 48%; -ms-flex: 0 0 48%;}

.seven.columns{ flex: 0 0 56.6666666667%; -ms-flex: 0 0 56.6666666667%;}

.eight.columns{ flex: 0 0 65.3333333333%; -ms-flex: 0 0 65.3333333333%; }

.nine.columns { flex: 0 0 74.0%; -ms-flex: 0 0 74.0%; }

.ten.columns  { flex: 0 0 82.6666666667%; -ms-flex: 0 0 82.6666666667%;}

.eleven.columns { flex: 0 0 91.3333333333%; -ms-flex: 0 0 91.3333333333%;}

.twelve.columns { flex: 0 0 100%; -ms-flex: 0 0 100%; margin-left: 0; }

本质上很简单，也很好理解，我们只设置 flex-basis (伸缩基准值)，就可以完成栅格系统。

父元素的属性

如上所示，子元素可以设定属性，那么父元素也能够设定属性，父元素总共有6大属性

flex-direction，设定子元素是：横向还是纵向排列。
flex-wrap，设定如果子元素超过一行，是否换行和换行顺序。
flex-flow，有两个值，第一个是 flex-direction，第二个值是 flex-wrap
justify-content，设定X轴的对齐方式
align-items，设定Y轴的对齐方式
align-content，把所有子元素看作整体，设定整体的对齐方式。

在这里我就不重复演示了，阮一峰老师的文章已经讲得非常清楚了。

扩展：父元素 justify-content，align-items 两个属性，很简单就能实现垂直居中。

参考文章

[阮一峰：Flex 布局教程] [http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html]
[Bootstrap源码：4.1.2] [https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css]
[菜鸟教程：Flex 布局语法教程] [http://www.runoob.com/w3cnote/flex-grammar.html]

我对 Flex 布局的一些认知