SimoneCSS3 弹性盒子之flex-direction
的有关信息介绍如下：
弹性盒子（box-flex）是CSS3新增的一种布局模式，相比传统的布局模式来说，它更简单好用，而不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题。但是该属性目前只有部分浏览器支持，因此在pc端开发中应用的比较少。
1、弹性盒子由弹性容器和弹性子元素组成
2、弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
3、弹性容器内包含了一个或多个弹性子元素。
例子：
弹性子元素在一行内显示
css部分：
.father{ /*direction: rtl;*/
display:-webkit-flex;
display: flex;
background: silver;
width:600px;
height:300px;
margin:20px auto;
}
.son{
width:150px;
height:150px;
background:burlywood;
margin: 15px;
color: #fff;;
}
html部分：
效果如图：
flex-direction 指定了弹性子元素在父容器中的显示顺序
flex-direction: row /row-reverse /column / column-reverse
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
flex-direction:row-reverse;
弹性子元素反转横向排列（右对齐，从后往前排，最后一项排在最前面
例子：
css部分：
.father{
display:-webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
background: silver;
width:600px;
height:300px;
margin:20px auto;
}
.son{
width:150px;
height:150px;
background:burlywood;
margin: 15px;
color: #fff;;
}
html部分：
效果如图：
flex-direction:row-reverse;
弹性盒子子元素纵向排列
例子：
css部分：
.father2{
display:-webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
background: silver;
width:600px;
margin:20px auto;
}
.son2{
width:150px;
height:150px;
background:royalblue;
margin: 15px;
color: #fff;;
}
html部分：
效果如图：
flex-direction:column-reverse；
反转纵向排列，从后往前排，最后一项排在最上面
例子：
css部分：
.father3{
display:-webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
background: silver;
width:600px;
margin:20px auto;
}
.son3{
width:150px;
height:150px;
background:red;
margin: 15px;
color: #fff;;
}
html部分：
效果如图:
