CSS3弹性盒子

弹性盒子（box-flex）是CSS3新增的一种布局模式，相比传统的布局模式来说，它更简单好用，而不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题。

1、弹性盒子由弹性容器和弹性子元素组成
2、弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
3、弹性容器内包含了一个或多个弹性子元素。

Css部分和html部分

效果图:

1.flex-direction 的属性：
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

2.flex-direction 指定了弹性子元素在父容器中的显示顺序
弹性子元素反转横向排列（右对齐，从后往前排，最后一项排在最前面）
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部分：

弹性子元素在一行内显示1

弹性子元素在一行内显示2

弹性子元素在一行内显示3

效果图：  3.flex-direction:row-reverse; 弹性盒子子元素纵向排列 css部分： .fatr2{ display:-webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; background: silver; width:600px; margin:20px auto; } .s{ width:150px; height:150px; background:royalblue; margin: 15px; color: #fff;; } html部分：

弹性子元素纵向排列1

弹性子元素纵向排列2

弹性子元素纵向排列3

效果图： 

4.flex-direction:column-reverse；
反转纵向排列，从后往前排，最后一项排在最上面
css部分：
.fher3{
display:-webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
background: silver;
width:600px;
margin:20px auto;
}
.on3{
width:150px;
height:150px;
background:red;
margin: 15px;
color: #fff;;
}
html部分：

弹性子元素反纵向排列1

弹性子元素反纵向排列2

弹性子元素反纵向排列3

效果图：