注意事项：
移动端要添加如下meta
<meta name="viewport" content=" width=device-width,height=device-height,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
基本概念：
flex 是 flexible box缩写 为弹性布局
注意：设置为flex布局后 子元素的 float clear vertical-align 属性将会失效，任何一个容器都可以指定为flex布局
实例：
.box{
display:flex;
}行内元素也可以使用flex布局
.box{
display:inline-flex;
}webkit内核浏览器 必须加上-webkit前缀
.box{
display:-webkit-flex;
display:flex;
}采用flex布局的元素，称为flex容器（flex container） 简称“容器”
它的所有子元素自动成为容器成员，成为flex项目(flex item)
实例：
<!-- ul 是容器 li是项目 --> <ul> <li>1</li> <li>2</li> <li>3</li> </ul>
父容器的属性 ：
flex-direction flex-wrap flex-flow justify-content align-items align-content
1、flex-direction 决定主轴方向（项目排列方向）
ul{
/* 设置ul为容器 */
display: flex;
/* 设置ul容器属性 为主轴(横轴)排列方向 */
flex-direction:column ;
/*
flex-direction 有4个值
row(默认值)(行):主轴为水平方向 起点在左端
row-reverse(反向/颠倒):主轴为水平方向 起点在右端
column(列) :主轴为垂直方向 起点在上沿
column-reverse:(列反向):主轴为垂直方向 起点在下沿
*/
}2. 设置"项目"在一行排列时排不下的情况
flex-wrap:nowrap; /* 默认情况下,'项目'都排在一条线 flex-wrap :属性定义，如果一条轴线排不下,如何换行 flex-wrap有3个值 nowrap: 默认 不换行 wrap: 换行 第一行在上方 wrap-reverse :换行 第一行在下方 */
3. flex-flow属性是 flex-direction属性和flex-wrap属性的简写形式,默认为row nowrap
格式为:
flex-flow：<flex-direction> <flex-wrap>
4. justify-content属性 定义"项目"在主轴的对齐方式
justify-content:space-around;
flex-start 默认 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐 项目之间间隔都相等
space-around 每个项目两侧都间隔相等 所以 项目之间的间隔比项目与边框的间隔大一倍
5. align-items 属性 定义项目在交叉轴上如何对齐
align-items:center;
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline(基线) 项目的第一行文字的基线对齐
stretch 默认(延伸) 如果项目未设置高度或设为auto 将沾满整个容器高度
6. align-content 属性 定义多根轴线的对齐方式 (如果项目只有一根轴线 该属性不起作用)
align-content:stretch;
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center:与交叉轴的中点对齐;
space-between 与交叉轴两端对齐 轴线之间的间隔平均分布
space-around:每根轴线两侧的间隔都相等,所以轴线之间的间隔比轴线与边框的间隔大一倍;
stretch (默认值) 轴线沾满整个交叉轴
项目的属性
以下6个属性设置在项目上
order flex-grow flex-shrink flex-basis flex align-self
参考：
官方文档：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.runoob.com/w3cnote/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html