toc

Intro

css3在css2的基础上新增了盒模型的属性，提出了弹性盒模型的概念。

首先使用弹性和模型（Flexible Box Module），需要定义父容器display的属性，但因为Flexible经常变动具体的属性值有所不同（参考）：

• 2009年以前display为box或者inline-box、box-{*}。
• 2011年，设置display为flexbox或者flex()函数。
• 2012-2013最新的则是display:flex; 或者flex-{*}。

注：弹性盒模型只有chrome和FF支持。

box-orient定义盒子的布局取向

box-orient定义了盒子内元素的流动布局方向，属性有

• horizontal 从左到右在一条水平线上显示子元素。
• vertical：从上到下在一条垂直线上显示子元素。
• inline-axis：默认值，盒子元素沿着内联轴显示子元素。
• block-axis：沿着块轴显示子元素。

注：inline-axis和block-axis是根据书写模式来决定。

在不同属性下的（demo）呈现如图所示：

box-direction 改变流动顺序，属性有：

• normal 即遵从一般的顺序 ，从左到右， 从上到下。
• reverse 与normal相反。
• inherit 继承上级元素的显示顺序。

当设置为reverse时呈现如图所示（色块的顺序相反）：