1. 弹性盒子 概念
CSS3 弹性盒(Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
2. CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意：
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
3. 弹性子元素在父容器中的位置
flex-direction
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
4. 其他常用属性
参考 https://www.runoob.com/css3/css3-flexbox.html
flex-flow ：flex-direction 和 flex-wrap 的简写
justify-content ： 设置弹性盒子元素在主轴（横轴）方向上的对齐方式
align-items ：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap ： 设置弹性盒子的子元素超出父容器时是否换行
align-content ：修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow ： 设置弹性盒子的子元素排列顺序
align-self : 在弹性子元素上使用。覆盖容器的 align-items 属性
flex : 设置弹性盒子的子元素如何分配空间
<html>
<head></head>
<style>
#main {
width: 350px;
height: 350px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction:column-reverse;
margin: auto;
}
#d {
#width: 1000px;
#height:100px;
}
</style>
<script>
</script>
<body>
<div id="main">
<div id="d" style="background-color:red;flex-grow:2;">A</div>
<div id="d" style="background-color:blue;">B</div>
<div id="d" style="background-color:khaki;">C</div>
<div id="d" style="background-color:pink;">D</div>
<div id="d" style="background-color:lightgrey;">E</div>
</div>
</body>
</html>