Flex意为“弹性布局”，其定义方式如下：
.box{
display:flex; //普通元素
}
.box2{
display:inline-flex; //行内元素
}
.box3{
display:-webkit-flex; //webkit内核的浏览器
}
当定义好Flex布局后，布局中的元素将被如下图规划。
Flex布局中的规划
能够对当前div（.box）设置的属性有以下六个
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
分别介绍各个属性的用途。
flex-direction 用于决定主轴的方向
flex-direction: row | row-reverse | column | column-reverse
//分别为 水平方向 左起点(default) | 水平方向 右起点 | 水平方向 右起点 | 垂直方向 下起点
flex-wrap 用于定义换行方式
flex-wrap: nowrap | wrap | wrap-reverse;
//分别为 不换行 | 换行 第一行在顶端 | 换行 第一行在底部
justify-content 用于定义主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
//和主轴方向有关，本例假设主轴从左到右
//左对齐(default) | 右对齐 | 居中 | 两段对齐 | 每个项目两侧间距相等
主轴对齐方式图例
align-items 用于定义在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
//起点对齐 | 终点对齐 | 居中对齐 | 各项目首行文字对齐 | 若未设置高度或auto则占满整个容器(default)
align-content 用于定义多轴线的对齐方式 若仅有一根轴线 则不起作用
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
利用Flex布局实现水平垂直居中的代码
注：在container中的div将相对于container居中
.container{
width: 100%;
height: 600px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
