弹性盒模型

 弹性盒模型：可以借鉴的网页地址（https://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/）

主轴并不固定为水平方向的 X 轴，交叉轴也不固定为垂直方向的 Y 轴

 

例子：

在代码清单2中，对于弹性盒布局的容器，使用"display:flex"声明使用弹性盒布局。CSS属性声明“flex-direction”用来确定主轴的方向，从而确定基本的条目排列方式。“flex-direction”属性的可选值及其含义如表1所示

默认情况下，弹性盒容器中的条目会尽量占满容器在主轴方向上的一行。当容器的主轴尺寸小于其所有条目总的主轴尺寸时，会出现条目之间互相重叠或超出容器范围的现象。CSS 属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。"flex-wrap"属性的可选值及其含义如表2所示。

可以使用"flex-flow"属性把"flex-direction"和"flex-wrap"结合起来，如代码清单 3所示。