导语（我这里的导语就是都是废话，没什么用的那种～）：这几天看了一个移动端的视频，因为我平时不怎么接触移动端。但好像移动端里总用到弹性盒子，虽然在pc端也有用，但是用得不多，也不知道为什么。所以，今天正好好好了解下什么是弹性盒子，以及它有什么作用。
弹性盒子：
要点一、弹性盒子其实是由两部分组成：弹性容器(Flex container)和弹性子元素(Flex item)。
弹性容器：通过设置 display 属性的值为 flex 或 inline-flex 将其定义为弹性容器。
弹性子元素：弹性容器内包含了一个或多个弹性子元素。
要点二、弹性盒子的作用范围：
弹性盒子只定义了弹性子元素如何在弹性容器内布局。
也就是说，弹性容器外及弹性子元素内都是正常渲染的。
要点三、1、css 列（CSS columns）在弹性盒子中不起作用。
2、float, clear and vertical-align 在flex项目中不起作用。
要点四、弹性盒子的属性：
弹性盒子有以下几个属性：（我常用的为绿色）
1、display: flex | inline-flex; 2、flex-direction 3、flex-wrap 4、flex-flow 5、justify-content 6、align-items 7、align-content 8、flex-grow 9、flex-shrink 10、flex-basis 11、flex 12、align-self 。
下面，我们来依次介绍他们。
display: flex | inline-flex;
该属性适用于弹性容器(写在弹性容器里)。
作用：定义一个弹性容器
flex-direction：
该属性适用于弹性容器(写在弹性容器里)。
作用：定义是------设置或检索伸缩盒对象的子元素在父容器中的位置，即顺序指定了弹性子元素在父容器中的位置。
值：
-
-
- row(默认值)：横向从左到右排列（左对齐），即水平显示，正如一行一样。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面)。
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
-
row:
代码：
<style> #main { display: flex; flex-direction:row-reverse; } #main div { width: 40px; height: 40px; } </style> </head> <body> <div id="main"> <div style="background-color:coral;">A</div> <div style="background-color:lightblue;">B</div> <div style="background-color:khaki;">C</div> <div style="background-color:pink;">D</div> <div style="background-color:lightgrey;">E</div> <div style="background-color:lightgreen;">F</div> </div>
效果：--------未完待续--------