本文已参与掘金创作者训练营第三期「高产更文」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。
为什么要学这个布局？
CSS3 中的 Flexbox 生来就是为了布局而生的，使用它能使许多布局布局变得简单。典型的三栏式布局、垂直水平居中布局，使用的是传统的浮动法、定位法，代码相对复杂难懂，如果使用 Flexbox 就会变得很简单。
将一个元素变成 Flexbox
定义容器的语法：
display : flex or display : inline-flex
定义了容器后该伸缩容器中的元素将变成伸缩项，并且该容器将生成两条轴：主轴 和 侧轴。
常用的容器属性
第一组：
flex-direction：改变主轴方向用，默认值为 row
flex-direction: row(从左到右) | row-reverse(从右到左) | column(从上到下) | column-reverse(从下到上)
flex-wrap：自动换行和改变侧轴方向，默认值为 nowrap
flex-wrap: nowrap(不换行) | wrap(换行) | wrap-reverse(换行且改变侧轴方向)
flex-flow：前两者的缩写
flex-flow: <flex-direction> || <flex-wrap>
第二组：
justify-content：控制子项在主轴的对齐方式，默认值为 flex-start
justify-content: flex-start(起点对齐) | flex-end(终点对齐) | center(居中) | space-between(两端对齐) | space-around(平均分配)
align-items：控制子项在侧轴的对齐方式，默认值为 stretch
align-items: flex-start(起点对齐) | flex-end(终点对齐) | center(居中) | stretch(未设置高度就铺满侧轴)
align-content：控制子项所组成的行（列）在侧轴的对齐方式
属性同 justify-content 几乎一致
常用的项目（子项）属性
第一组：
order：用来改变子项位置，默认值为 0
order: 0 // 值越大位置越靠后
第二组：
align-self：控制单个子项在侧轴的对齐方式
属性同 align-items 几乎一致
第三组：
flex-grow：子项的伸展比例，默认值为 0，即如果存在剩余空间，也不放大。
flex-grow: 0;
flex-shrink：子项的收缩比例，默认值为1，即如果空间不足，该子项将缩小。
flex-shrink: 1;
flex-basis：定义子项的伸缩前的长度（和使用 width 差不多），默认值为 auto，即原本的大小。
flex-basis: auto;
flex：前三者的简写形式，后两个属性可选，默认值 0 1 auto
flex: 0 1 auto;
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox 实现垂直水平居中</title>
<style type="text/css">
#div_0 {
height: 300px;
width: 500px;
background-color: dimgray;
display: flex;
/* 弹性盒子*/
justify-content: center;
/* 显示在主轴的中间 */
align-items: center;
/* 子项在侧轴中间位置 */
}
#div_1 {
height: 100px;
width: 100px;
background-color: burlywood;
}
</style>
</head>
<body>
<div id="div_0">
<div id="div_1">居中的元素</div>
</div>
</body>
</html>
