弹性盒子的基础知识

1.弹性盒是css3的一种新的布局模式。
2.css3弹性盒，是一种当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间。
3.弹性盒内容
弹性盒子由弹性容器和弹性子元素组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
4.例如：
1> display：flex；建立子元素弹性布局，子元素脱离文档流。使子元素在一行显示。
direction属性
2> direction属性为rtl(right-to-left),把子元素显示方向设置为“从右向左”。flex-direction 属性指定了弹性子元素在父容器中的位置。
stretch - 默认。各行将会伸展以占用剩余的空间。
3>flex-start - 各行向弹性盒容器的起始位置堆叠。flex-end - 各行向弹性盒容器的结束位置堆叠。center -各行向弹性盒容器的中间位置堆叠。space-between -各行在弹性盒容器中平均分布。space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。order 属性设置或检索弹性盒模型对象的子元素出现的順序。。