本文主要记录flex布局demo和属性问题
flex顾名思义，弹性盒子的布局属性。使用此属性得设置一个父级，然后操作父级中的子元素
heml代码
<style>
body { margin:0; padding: 0;}
.father {
position: flex;
left: 0;top: 0;right: 0;bottom: 0;margin: auto;
width: 50vw;
height: 50vh;
border: 2px solid #000;
display: flex;
padding: 0px;
}
.boy {
width: 20px;
height: 20px;
background: #ffc107;
border: 1px solid #00bcd4;
margin: 0px;
}
</style>
<body>
<div class="father">
<div class="boy a">a</div>
<div class="boy b">b</div>
<div class="boy c">c</div>
<div class="boy d">d</div>
<div class="boy e">e</div>
<div class="boy a">a</div>
<div class="boy b">b</div>
<div class="boy c">c</div>
<div class="boy d">d</div>
<div class="boy e">e</div>
</div>
</body>
备注：可以指定任意一个容器元素为父级.father{ display:flex; }，行内元素同样可以.father { display:inline-flex }。Webkit 内核的浏览器，必须加上-webkit前缀，示：display:-webkit-flex。
图示：
以上一个基本的弹性盒子算是创建完成了，下面详细介绍关于flex父级框的属性问题
| 元素 | 值 | 说明 |
|---|---|---|
| flex-direction | row 、row-reverse 、 column 、 column-reverse | 主轴排列方向上、下、左、右 |
| flex-wrap | nowrap 、 wrap 、 wrap-reverse | 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行 |
| flex-flow | row nowrap （默认） | flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap |
| justify-content | flex-start 、 flex-end 、 center 、 space-between 、 space-around | 子元素在主轴上的对齐方式，分别是左对齐、右对齐、居中对齐、居中两端对齐、分散两端对齐 |
| align-items | flex-start、flex-end、center、baseline、stretch | 交叉轴的起始点对齐，中间对齐，终点对齐，文字基线对齐，高度占满 |
| align-content | flex-start、flex-end、center、space-between、space-around、stretch | 一言概之，相当于纵向轴的align-items(必须有多个中心轴才可使用) |
看到上面密密麻麻的属性很蒙圈不要紧，下面贴出相应的demo
flex-direction属性
.box { flex-direction: row | row-reverse | column | column-reverse; }
flex-wrap属性
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
flex-flow属性
flex-flow是flex-direction和flex-wrap
比如：flex-flow: <flex-direction> || <flex-wrap>;等效于flex-direction:和flex-wrap
justify-content属性
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
align-items属性
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
align-content属性
转载说明：以上列举所有父级的属性的demo，文中主要内容来自http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
阮一峰大神的日志，
