原文链接：http://caibaojian.com/flexbox-guide.html
请注意：
1.css 列（CSS columns）在弹性盒子中不起作用·
2.float, clear and vertical-align 在flex项目中不起作用
flex-direction(适用于父累容器的元素上)：设置或检索伸缩纸盒对象的子元素在父容器中的位置
值：flex-direction:row| row-reverse | column | column-reverse
row:横向从左到右排列（左对齐）,默认的排列方式
row-reverse:反转横向排列（右对齐）
column:纵向排列
column-reverse:反转纵向排列
flex生效需定义其父元素display为flex或inline-flex(box或inline-box，这是旧的方式)
<!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>
</head>
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-direction:row;
flex-direction:row;
}
#box2{
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
}
#box3{
height:500px;
-webkit-flex-direction:column;
flex-direction:column;
}
#box4{
height:500px;
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
</style>
<body>
<h2>flex-direction:row</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:row-reverse</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:column</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:column-reverse</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
</body>
</html>
flex-wrap(适用于父类容器上)：设置或者检索伸缩盒对象的子元素超出父容器时是否换行
flex-wrap:nowrap | wrap |wrap-reverse
nowrap:当子元素溢出父容器时不换行。
wrap:当子元素溢出父容器时自动换行。
wrap-reverse:反转wrap排列。
<!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>
</head>
<style>
.box{
display:-webkit-flex;
display:flex;
220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-wrap:nowrap;
flex-wrap:nowrap;
}
#box2{
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
#box3{
-webkit-flex-wrap:wrap-reverse;
flex-wrap:wrap-reverse;
}</style>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap-reverse</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
justify-content(适用于父类容器上)：设置或检索弹性盒子元素再主轴（h横轴）方向的对齐方式。
当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。
justify-content:flex-start | flex-end | center | sapce-betweenn | space-around
flex-start:弹性盒子元素将向行始位置对齐。
flex-end:弹性盒子元素将向行借宿位置对齐
center:弹性盒子元素将向行中间位置对齐
jusryfy-content:space-between:弹性盒子元素会平均地分布在行里。
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。