css3 flex box伸缩布局盒模型

一个设有「display:flex」或「display:inline-flex」的元素是一个伸缩容器，伸缩容器的子元素被称为伸缩项目，这些子元素使用伸缩布局模型来排版。

与块布局与行内布局不同，伸缩布局偏向使用伸缩流的方向。为了让描述伸缩布局变得更容易，本章节定义一系列相对于伸缩流的术语。「flex-flow」的值决定了这些术语如何对应到物理方向（上／右／下／左）、物理轴（垂直／水平）、物理大小（宽度／高度）。

图 2. 一个「row」伸缩容器中各种方向与大小术语的示意图。

主轴、主轴方向

用户代理沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。

主轴起点、主轴终点

伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。

主轴长度、主轴长度属性

伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是「width」或「height」属性，由哪一个对着主轴方向决定。

侧轴、侧轴方向

与主轴垂直的轴称作侧轴，是侧轴方向的延伸。

侧轴起点、侧轴终点

填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。

侧轴长度、侧轴长度属性

伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。