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]
