弹性盒子（box-flex）是CSS3新增的一种布局模式，相比传统的布局模式来说，它更简单好用，而不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题。但是该属性目前只有部分浏览器支持，因此在pc端开发中应用的比较少。
工具/原料
网页编辑器
浏览器（具有调试功能）
CSS3 弹性盒子内容
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部分：<div class="father"> <div class="son">弹性子元素在一行内显示1</div> <div class="son">弹性子元素在一行内显示2</div> <div class="son">弹性子元素在一行内显示3</div></div>效果如图：
flex-direction控制元素显示顺序
1、flex-direction 指定了弹性子元素在父容器中的显示顺序flex-direction: row /row-reverse /column / column-reverserow：横向从左到右排列（左对齐），默认的排列方式。row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。column：纵向排列。column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
2、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部分：<div class="father"> <div class="son">弹性子元素在一行内显示1</div> <div class="son">弹性子元素在一行内显示2</div> <div class="son">弹性子元素在一行内显示3</div></div>效果如图：
3、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部分：<div class="father2"> <div class="son2">弹性子元素纵向排列1</div> <div class="son2">弹性子元素纵向排列2</div> <div class="son2">弹性子元素纵向排列3</div></div>效果如图：
4、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部分：<div class="father3"> <div class="son3">弹性子元素反纵向排列1</div> <div class="son3">弹性子元素反纵向排列2</div> <div class="son3">弹性子元素反纵向排列3</div></div>效果如图:
