9.6.3　改变元素的排列方向

9.6.3　改变元素的排列方向

使用弹性盒布局的时候，可以很简单地将多个元素的排列方向从水平方向修改为垂直方向，或者从垂直方向修改为水平方向，就好比把布局结构由左中右排列的“同”字型变成了由上中下排列的“三”字型。

在CSS3中，使用box-orient属性指定多个元素的排列方向，针对Firefox浏览器，需要将其写为-moz-box-orient，针对Safari浏览器或者Chrome浏览器，需要将其写为-webkit-box-orient，IE浏览器不支持该属性。

box-orient属性的默认值为horizontal（水平方向排列），也就是说在不设置该属性的时候元素都是按照水平的方式排列的，如果布局需要也可将其值设为vertical（表示垂直方向排列）。

本例在9.6.1节自适应窗口的弹性盒布局的例子的基础上，将水平放置的3个div元素改为垂直放置。由于网页内容的总宽度由container元素设为了80%，最大不超过1 000 px，因此在垂直排列时不需要再设每个div元素的宽度，它们的宽度都和container元素相同，同理，由于宽度已由container元素决定，也无须在content元素中设置box-flex属性。

在设置过box属性的wrapper中加入box-orient属性，并设置属性值为vertical，则左侧边栏、中间内容、右侧边栏的排列方向将从水平方向排列变为垂直方向排列，如图9-26所示。

图9-26　改变元素的排列方向

代码如下：